Aufgabe 1

1. jQuery mobile Einbindung

Bevor Inhalte entwickelt werden können, müssen im head-Bereich ein <meta>-Tag erstellt sowie mehrere Dateien eingebunden werden:
  • Die Stylesheet-Datei sorgt für die optischen Verbesserungen.
  • Da jQuery Mobile auf jQuery basiert, muss diese Bibliothek ebenfalls referenziert werden.
  • Schließlich wird eine spezielle jQuery-Mobile-Javascript-Datei eingebunden.
Erstelle eine Datei mit dem Namen index.html und kopiere die Ordner img, js und css in das gleiche Verzeichnis wie das erstellte HTML-Dokument.
Gegeben ist das HTML5 Grundgerüst.
<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Seitentitel</title>
	</head>
	<body>
		// Inhalte
	</body>
</html>

A) Einfügen des <meta>-Tags

Für mobile Websites muss der Anzeigebereich definiert werden, sonst würde es die Seite zu klein ausgegeben. Dazu muss der Viewport eingestellt werden.

Fügen Sie ein <meta>-Tag hinzu. Der Tag muss außerdem folgende Attribute haben:
  • name="viewport"
  • content="width= device-width, initial-scale=1"

B) Einbindung von jQuery und der jQuery mobile-Logik

Da jQuery Mobile auf jQuery basiert, müssen beide Bibliotheken ebenfalls im Head eingebunden werden. Dazu wird nun je ein <script>-Tag erstellt, diesem wird folgendes Attribut zugeordnet:
  • src="[PFAD ZUR JS DATEI]"
Anmerkung: Bei dem Attribut src wird von dem Pfad der HTML Datei ausgegangen.
Bsp.: src="js/jquery.js"

Wichtig dabei ist, dass jQuery mobile nach jQuery eingebunden wird!
Achten Sie auf den korrekten Namen der Bibliothek.
Vergessen Sie nicht, dass das <script>-Tag geschlossen werden muss.

C) Einbindung des jQuery mobile-Layouts

Die CSS-Datei von jQuery erzeugt die optischen Verbesserungen des Frameworks. Die Einbindung erfolgt mit einem <link>-Tag. Außerdem müssen folgende Attribute vergeben werden:
  • rel="stylesheet"
  • href="[PFAD ZUR CSS DATEI]"

Hinweis: Die komplette erste Aufgabe muss im Head des HTML-Dokuments entwickelt werden!