Grundgerüst für die Web-App
Für unsere Web-App benötigen wir ein Grundgerüst. Dieses wird bis auch den Inhalt von <title>…</title> und der allgemeinen Beschreibung unter <meta name="description" content="…"> für alle Web-Apps gleich sein. Hier also das Grundgerüst, das wir im Kapitel jQuery Mobile Grundgerüst unter https://www.php-kurs.com/jquery-mobile-grundgeruest.htm schon kennen gelernt haben.
Unsere Datei speichern wir mit dem Dateinamen „index.php“.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
Die bisherigen Angaben sind Standard. Wir benötigen das Grundgerüst und arbeiten mit UTF-8. Somit können wir unsere Umlaute wie „äöü“ direkt nutzen und auch später die Datenbankanbindung wird über UTF-8 erfolgen.
Bitte beim folgenden Inhalt von <title> und <meta name="description" bei der eigenen Web-App auf passendes und entsprechend aussagekräftigen Text achten. Dieser wandert auch in die Suchmaschine Google und wird dem Besucher bei den Treffern zum Anklicken angezeigt. Mehr dazu gibt es auf der Schwesterseite zum PHP-Kurs unter https://www.html-seminar.de/html-seitenaufbau.htm
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mike Coustic - Gitarrist</title>
<meta name="description" content="Veranstaltungstermine von Mike Coustic.
Zusätzlich Hörbeispiele.">
Und nun kommt wieder Standard – in den Code-Beispielen findet sich immer die letzte Zeile vom bisherigen Code und der neue Teil:
<meta name="description" content="Veranstaltungstermine von Mike Coustic.
Zusätzlich Hörbeispiele.">
<meta name="viewport" content="width=device-width, initial-scale=1">
Der Viewport sagt unserem Anzeigegerät, dass der Inhalt auch für mobile Geräte ausgelegt ist. Das ist der erste Schritt für Web-Apps für mobile Geräte.
Und der zweite folgt sogleich – die Einbindung von jQuery mobile:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
Wir haben bei dieser Web-App keine sensiblen Daten, daher können wir problemlos jQuery und jQuery mobile extern einbinden direkt von jquery.com
Jetzt wollen wir noch eine externe Datei mit eigenem CSS-Design einbinden:
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<!-- eigene CSS-Anweisungen -->
<link href="design.css" rel="stylesheet">
Hier haben wir später nur ein paar Zeilen für die Beispiel-Web-App. Ich versuche den Code so übersichtlich zu machen, wie möglich. Daher die externe Einbindung. Es wäre auch möglich, den CSS-Code hier direkt einzubinden. Falls die Vorgehensweise dazu nicht bekannt sein sollte – unter https://www.html-seminar.de/stylesheets_in_html_einbinden.htm findet sich das entsprechende Hintergrundwissen.
Vorteil wäre, dass die Web-App noch schneller geladen wird – aber der Übersichtlichkeit halber und zum besseren Lernen die Trennung von HTML und CSS.
Und nun der Rest von unserem Grundgerüst:
<link href="design.css" rel="stylesheet">
</head>
<body>
<!-- Hier kommt nun unser Inhalt -->
</body>
</html>
Und damit es Übersichtlich ist, der komplette bisherige Code am Stück:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mike Coustic - Gitarrist</title>
<meta name="description" content="Veranstaltungstermine von Mike Coustic.
Zusätzlich Hörbeispiele.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- eigene CSS-Anweisungen -->
<link href="design.css" rel="stylesheet">
</head>
<body>
</body>
</html>
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: