HTML and CSS Reference
In-Depth Information
Falls Sie anstatt eines Texts lieber ein Home-Symbol für den rechten Pfeil verwenden
möchten, müssen Sie folgende HTML-Zeile einbauen:
<div id "leftnav"><a href "seite.html"><img alt "home" src "images/home.png"
/></a></div>
Probieren Sie einfach die verschiedenen Variationen aus. Sie werden erstaunt sein, wie
einfach sich eine professionell aussehende iPhone-Titelzeile erstellen lässt.
Das nächste Element hatten wir im vorherigen Beispiel nicht verwendet, wir hätten dazu
wahrscheinlich seitenweise CSS-Code abdrucken und erfinden müssen. Was Sie eben-
falls in vielen iPhone-Anwendungen finden, ist ein Suchfeld, das sich direkt unterhalb
der Titelzeile befindet und in der Regel in grauer Schrift mitteilt, was man in diesem
Feld suchen kann.
Mittels iWebKit ist die Einbindung eines solchen Suchfelds ein Kinderspiel und
erfordert in der Tat nur wenige Zeilen HTML-Code:
<div class "searchbox">
<form action "http://..." method "get">
<fieldset>
<input id "suche" placeholder "Oldtimer Datenbank durchsuchen"
type "text" />
<input id "submit" type "hidden" />
</fieldset>
</form>
</div>
Mit div class "searchbox" legen Sie fest, dass die folgenden Zeilen HTML für den
Inhalt und die Funktionsweise der Suchbox reserviert werden. Das form -Tag ist her-
kömmliches HTML und beschreibt eine Formulareingabe und was mit den Formular-
daten geschehen soll. Interessant sind hier das Tag fieldset , das dem Browser mitteilt,
dass alle folgenden Formularelemente in einer Gruppe zusammengefasst sind, und
natürlich die beiden input -Tags für das Texteingabefeld sowie das unsichtbare submit -
Tag, das ein Absenden des Formulars ermöglicht.
Der eigentliche Inhalt einer iWebKit-Anwendung wird durch das Tag div id
"content" definiert. Das erste Element ist eine graue Überschrift, die nicht über ein
div , sondern einfach über eine Klasse des span -Tags definiert wird:
<span class "graytitle">Spitzen Oldtimer von VW &amp; Porsche</span>
Im Gegensatz zum letzten Beispiel mit dem hausgemachten CSS haben wir die Über-
schrift etwas gekürzt, da die grauen Überschriften in der Regel nur einzeilig auftreten.
Eines der wichtigsten Gestaltungselemente beim Arbeiten mit iWebKit ist die Definition
der Seitenelemente (Page Items). Zusammengehörende Seitenelemente werden durch
ul class "pageitem" definiert. Im nächsten Beispiel ist das erkennbar an den
pageitem -Definitionen für die Textbox Wir führen und reparieren ... und die nachfol-
gende Menüstruktur.
Beide Seitenelemente können weitere Unterelemente beinhalten (das Menü hat
beispielsweise mehrere Menüpunkte), aber alle zu einem Seitenelement gehörenden
Search WWH ::




Custom Search