Apps mit HTML5, CSS3 und JavaScript – Fأ¼r iPhone, iPad und 2020-03-14آ  grammierung beginnen, geben

  • View
    0

  • Download
    0

Embed Size (px)

Text of Apps mit HTML5, CSS3 und JavaScript – Fأ¼r iPhone, iPad und 2020-03-14آ  grammierung...

  • 45

    2 Kapitel 2

    Das technische Grundgerüst

    Konzeption ist das eine, die Umsetzung das andere. In diesem Kapitel

    zeigen wir Ihnen die Grundlagen von HTML5, CSS3 und JavaScript.

    Nun, da Sie ein wasserdichtes Konzept für Ihre App haben, sind Sie schon ganz nervös

    und wollen endlich loslegen? Sehr gut! Bevor Sie mit konkreter Gestaltung und Pro-

    grammierung beginnen, geben wir Ihnen einen kleinen Crashkurs in HTML5, CSS3

    und JavaScript. Dann sind wir alle für den weiteren Verlauf des Buches auf demselben

    Stand und können so richtig durchstarten.

    2.1 HTML5 – Definition und aktueller Stand

    HTML ist die Kurzform für Hypertext Markup Language. Mit anderen Worten bedeu-

    tet dies, dass es sich um eine Definitionssprache und nicht um eine Programmier-

    sprache handelt. Der Zusatz Hypertext ist schon ein kleiner Fingerzeig auf die erwei-

    terten Funktionen einer HTML-Datei gegenüber einer reinen Textdatei.

    Anfänglich standen Weberfinder Tim Berners-Lee und sein Team vor dem Problem

    der Vernetzung von Inhalten. Die Möglichkeit war nun gegeben, Inhalte und Dateien

    via Telefonleitungen über viele Kilometer hinweg digital auszutauschen. Allerdings

    bestand jedes aufgerufene Dokument nur aus sich selbst, ohne Verknüpfung zu

    anderen Dokumenten. Berners-Lee musste einen Weg finden, um Seiten miteinan-

    der zu verknüpfen und somit die Relevanz und die Vernetzung des frühen Internets

    zu erhöhen – der Hyperlink war geboren.

    Der Hyperlink, als charakteristischste Eigenschaft des HTML-Standards, bietet die

    Möglichkeit, Texte und Wortbausteine mit anderen HTML-Seiten zu verknüpfen, um

    so Inhalte anzureichern und auf weiterführende Seiten zu verweisen. Dies hat sich

    bis heute nicht geändert, obwohl HTML mittlerweile um viele Funktionen und

    Schnittstellen, bis zum heutigen Stand von HTML5, erweitert wurde. Die Verlinkung

    von Inhalten und Seiten ist immer noch ein zentraler Mechanismus in der Funk-

    tionsweise des Internets. Stellen Sie sich das einmal vor: Eine Nachrichtenseite wie

    http://www.spiegel.de ohne Unterseiten oder Verlinkungen; Sie hätten wahrschein-

    lich vom vielen Scrollen Muskelkater im Finger, bevor Sie das Ende der Seite über-

    haupt erahnt hätten.

  • 2 Das technische Grundgerüst

    46

    2.1.1 HTML als Standard

    Die Entwicklung des HTML-Standards ist keinesfalls abgeschlossen – und wird es

    auch nie sein. Das W3C-Konsortium, in dem neben Wirtschaftsunternehmen immer

    noch Tim Berners-Lee (mittlerweile von der Queen zum Sir geadelt) eine entschei-

    dende Rolle spielt, arbeitet kontinuierlich an dessen Weiterentwicklung. Probleme

    auf diesem Weg sind natürlich die Interessen der einzelnen Mitglieder, aber auch die

    Kompatibilität mit älteren Versionen. Das Team muss jederzeit sicherstellen, dass

    eine neue HTML-Version mit älteren Browsern, die vielleicht Teile neuer Funktionen

    oder einer angepassten Syntax nicht verstehen, kompatibel ist. Damit hängt die

    Adaptionsrate einer neuen Version nicht immer von Benutzern oder Webentwick-

    lern ab, sondern vor allem von den technologischen Gegebenheiten und Browserent-

    wicklungen sowie der Marktmacht von Unternehmen, die einen neuen Standard

    vorantreiben.

    2.1.2 HTML5 als Marketinginstrument

    HTML5 ist nicht mehr nur ein Begriff, der die neueste Version des Webstandards

    beschreibt, sondern vielmehr ein Marketinginstrument. HTML5 steht heute für

    anwenderorientiertes Internet, bei dem viele Websites eigentlich schon kleine (bis

    große) Applikationen darstellen – Internet, das auf allen Endgeräten, egal ob Tablet,

    Smartphone, Laptop, Desktoprechner oder gar im Auto, funktioniert.

    HTML5 ist ein häufig verwendeter Begriff, der in viele Richtungen ausgelegt werden

    kann. Wahrscheinlich könnten Sie sogar ein Restaurant mit demselben Namen auf-

    machen, und es würde eine Heerschar von Besuchern anziehen. Mit HTML5 ist auch

    nicht immer nur der eigentliche HTML-Standard oder gar die eigentliche HTML-

    Datei gemeint, sondern meist auch das »moderne« Web an sich. HTML5 wird dabei

    vom W3C-Konsortium als Marke mit eigenem Logo gepusht und insofern von vielen

    Endanwendern bereits erkannt und damit mit modernem Internet assoziiert.

    Wenn Sie noch mehr Informationen über die Geschichte von HTML und vor allem

    über dessen genauen technischen Eigenschaften erfahren möchten, lohnt ein Blick

    auf die folgenden Seiten:

    � http://de.wikipedia.org/wiki/Hypertext_Markup_Language

    � http://www.w3.org/People/Raggett/book4/ch02.html (in Englisch)

    2.1.3 Der Aufbau einer einfachen HTML5-Seite

    Nach diesem kleinen Geschichtsexkurs erstellen Sie nun das Fundament Ihrer ersten

    eigenen WebApp, eine HTML5-Seite.

    2.1 HTML5 – Definition und aktueller Stand

    47

    2

    HTML ist eine Definitionssprache, d. h., Sie definieren Elemente und deren Inhalte.

    Die Gestaltung und Anmutung bestimmen Sie im nächsten Schritt über CSS, aber

    eins nach dem anderen.

    In HTML werden Inhalte definiert, indem diese mit sogenannten Tags umschlossen

    werden. Tags, engl. für Etikett oder Markierung, sagen dem Browser, wie er einen In-

    halt zu interpretieren hat. Ein Tag gestaltet sich meist nach dem gleichen Schema. Es

    wird mit einer Bezeichnung in spitzen Klammern geöffnet, z. B. , und mit der-

    selben Bezeichnung und einem Schrägstrich wieder geschlossen: . Alles, was

    sich zwischen diesen beiden Klammern befindet, interpretiert der Browser entspre-

    chend.

    Erstellen Sie Ihre erste HTML5-Seite mit folgendem Code:

    Meine erste Überschrift

    Mein erster Text.

    Listing 2.1 Eine einfache HTML5-Seite

    Welcher Editor darf es sein?

    Editoren, die Ihnen bei der Programmierung helfen, gibt es viele. Unser Favorit ist

    Sublime Text (Windows und Mac). Sie finden den Editor unter https://www.sublime-

    text.com. Sublime Text unterstützt Sie u. a. mit automatischen Vervollständigungen

    und einer farblichen Unterscheidung einzelner Codebausteine, sodass Sie sich

    schneller zurechtfinden. Das Programm ist zunächst kostenlos, bei längerer Verwen-

    dung empfiehlt sich der Erwerb einer Lizenz.

    Diese Definition sagt dem Browser, dass es sich um ein Dokument nach dem HTML5-

    Standard handelt. Diese Konfiguration kann u. U. große Auswirkungen auf die Dar-

    stellung haben; denn interpretiert der Browser die Webseite nach einem alten Stan-

    dard, kann das Layout auseinanderfliegen, oder neue Funktionen werden nicht

    unterstützt.

  • 2 Das technische Grundgerüst

    48

    Jede HTML-Seite wird von diesem Element umschlossen. Es definiert, dass es sich bei

    dem folgenden Code um eine HTML-Seite handelt. Der Zusatz lang ist dafür da, die

    Sprache der Webseite zu definieren. Dies ist besonders für Suchmaschinen und eine

    etwaige Silbentrennung durch den Browser relevant.

    Im head-Bereich werden Eigenschaften festgelegt, die normalerweise nicht im her-

    kömmlichen Inhalt zu sehen sind. Neben den für Suchmaschinen relevanten meta-

    Tags, die z. B. Schlüsselwörter und den Namen des Autors enthalten können, kann

    der head-Bereich auch Hinweise auf Verknüpfungen zu JavaScript oder CSS-Dateien

    beinhalten. Außerdem werden hier auch Apple-spezifische Definitionen unterge-

    bracht, die das Verhalten der Seite auf mobilen Endgeräten beeinflussen. Doch dazu

    später mehr.

    Dieses Tag definiert, welchen Zeichensatz der Browser verwenden soll. Es gibt die ver-

    schiedensten Schriftsysteme und Zeichen auf der Welt. All diese Zeichen sind in einer

    großen Tabelle hinterlegt, in der jedem Zeichen eine Identifikationsnummer zuge-

    ordnet ist. Eine dieser Tabelle (und zugleich die umfangreichste) lautet utf-8. Damit

    stellen Sie sicher, dass Umlaute und andere spezielle Sonderzeichen immer korrekt

    dargestellt werden. Falls Sie also einmal merkwürdige Zeichen in Ihrer App entde-

    cken, überprüfen Sie das verwendete charset.

    Das title-Element definiert den Namen der Webseite, der in der Browserleiste, auf

    dem Tab oder in den Suchergebnissen bei Google zu sehen ist.

    Der body-Bereich beinhaltet alles, was als Inhalt im Browser angezeigt wird. In diesem

    Bereich werden Sie sich hauptsächlich tummeln.

    Eine Überschrift der ersten Ebene (headline 1). Viele Browser haben für die verschie-

    denen Auszeichnungselemente, wie Überschrift 1 (h1), Überschrift 2 (h2) usw., schon

    vordefinierte Stile, die Sie aber natürlich ohne Probleme mit CSS anpassen und

    gestalten können.

    Das p-Tag beschreibt einen einfachen Textabsatz (engl.: paragraph).

    2.1 HTML5 – Definition und aktueller Stand

    49

    2

    Ihre erste HTML5-Seite wird Ihnen noch häufiger als Grundlage für einige Projekte in

    diesem Buch dienen. Also, gut aufbewahren!

    (Kleiner) Tipp

    Schreiben Sie Tags immer klein. So gibt es keine Browserprobleme, und Sie finden

    sich gut zurecht. Versuchen Sie außerdem, mit Einrückungen zu arbeiten. Bei einem

    komplizierten HTML-Dokument kommt man schnell durcheinander, welches Tag

    noch offen oder bereits wieder geschlossen ist. Durch das Einrücken können Sie die

Recommended

View more >