Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel Brückenkurs „Front-End Webapp“ Kursaufgaben Tag 2 Allgemeiner Hinweis Speichern Sie alle erstellten HTML-Dateien auf Ihrem Home-Laufwerk H! Thema 1: Links Aufgabe 1 – Werkzeuge Laden Sie sich den Editor Notepad++ hier herunter: http://www.webapp-frontend.de Entpacken Sie die zip-Datei in Ihrem Home-Laufwerk H. Öffnen Sie den Ordner „npp.6.7.4.bin“ und starten Sie die Anwendung „notpad++“! Machen Sie sich mit der Benutzeroberfläche vertraut. Öffnen Sie eine HTML-Datei aus den letzten Übungen über „Datei Öffnen“. Wählen Sie „Ausführen  Launch in IE“ bzw. „Run  Launch in IE“, um die Seite im Browser anzuzeigen. Aufgabe 2 – neue Tags Arbeiten Sie im HTML-Tutorial den Abschnitt HTML Links durch. Aufgabe 3 – Übungsaufgabe 1. Erstellen Sie einen neuen Ordner mit dem Namen „Packliste“. Kopieren Sie die Datei Packliste.html in diesen Ordner. 2. Öffnen Sie die Datei Packliste.html (Tag 1, Aufgabe 5) im Editor. Wandeln Sie die folgenden Begriffe in Links um:  „Rucksack mit Regencape“  Link zur Seite www.amazon.de/s?rh=n%3A3024035031%2Ck%3Adeuter+rucksack&keywords=deuter+ruck sack&ie=UTF8  „iPad“  Link zur Seite http://www.amazon.de/gp/product/B009WN9HAA/ref=as_li_ss_tl?ie=UTF8&camp=1638&cre ative=19454&creativeASIN=B009WN9HAA&linkCode=as2&tag=travelicia-21  „Zipper-Beutel“  Link zur Seite http://www.amazon.de/gp/product/B007WGFJ3I/ref=as_li_ss_tl?ie=UTF8&camp=1638&creati ve=19454&creativeASIN=B007WGFJ3I&linkCode=as2&tag=travelicia-21 Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel  „Drybag“  Link zur Seite http://www.amazon.de/gp/product/B0085LZZ2Y/ref=as_li_ss_tl?ie=UTF8&camp=1638&creati ve=19454&creativeASIN=B0085LZZ2Y&linkCode=as2&tag=travelicia-21 3. Laden Sie das Bild „fiji-293826_1280.JPG“ vom Übungsserver herunter und speichern Sie es im Ordner „Packliste“. Ergänzen Sie in der Datei Packliste.html Code, um das Bild an einer geeigneten Stelle auf der Webseite zu platzieren. 4. Wandeln Sie das Bild in einen Link zu folgender Seite um: https://www.travelicia.de/packliste/ 5. Lassen Sie sich die Webseite anschließend im Browser anzeigen. Aufgabe 4 – Übungsaufgabe 1. Setzen Sie den Text in der Datei 3D-Brillen.pdf als Webseite im HTML-Format um. 2. Setzen Sie alle Links um! Die Links können Sie in der pdf-Datei anklicken, sodass sich die verlinkte Seite im Browser öffnet. Danach können Sie die Link-Adresse (URL) aus der Adresszeile des Browsers kopieren und in Ihren HTML-Code einfügen. 3. Speichern Sie die HTML-Datei unter dem Namen 3D-Brillen.html. Lassen Sie sich die Webseite anschließend im Browser anzeigen. 4. Nun soll ein Inhaltsverzeichnis für diese Webseite erstellt werden. Es soll am Anfang der Seite eingefügt werden und ungefähr so aussehen: 1 Farbfilterbrillen (Anaglyphenbrillen) 2 Interferenzfilter-Brillen 3 Pulfrich-Brillen 4 ChromaDepth-Brillen 5 Polfilterbrillen 6 LCD-Shutterbrillen Schritt 1: Weisen Sie jeder Überschrift eine eindeutige ID zu (die ID ist ein Anker bzw. ein bookmark). Nutzen Sie das Attribut „id“, welches für jedes Tag verwendet werden kann. Das kann z.B. so aussehen: <h2 id=“farbfilter“>Farbfilterbrillen (Anaglyphenbrillen)</h2> oder so: <h2><a id=“farbfilter“>Farbfilterbrillen (Anaglyphenbrillen)</a></h2> Schritt 2: Am Anfang der Seite können Sie nun die Links einfügen, die auf die einzelnen Anker verweisen. Das kann z.B. so aussehen: <a>href=“#farbfilter“>Farbfilterbrillen (Anaglyphenbrillen)</a> 5. Fügen Sie unter dem Inhaltsverzeichnis eine horizontale Linie ein: <hr> 6. Speichern Sie die HTML-Datei und lassen Sie sich die Webseite im Browser anzeigen. Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel Thema 2: Tabellen Aufgabe 5 – neue Tags Arbeiten Sie im HTML-Tutorial den Abschnitt HTML Tables durch. Aufgabe 6 – Übungsaufgabe Öffnen Sie eine neue, leere HTML-Datei (im Editor „DateiNeu“). Es soll eine Webseite erstellt werden, in der nacheinander die folgenden Tabellen dargestellt werden: Artikel Tastatur Monitor Bestand Menge 2 3 Stadtrundfahrten in Berlin Katalogbestellung Die Textausrichtung (links, rechts, zentriert) können Sie beliebig wählen! Ergänzen Sie zwischen den <head>-Tags folgende Stilangaben: <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> Speichern Sie die Datei unter dem Namen „Tabellen.html“ und lassen Sie sich die Webseite im Browser anzeigen. Hochschule Zittau/Görlitz, Fakultät EI, M.Sc. Anna Prenzel Aufgabe 7 – Übungsaufgabe Setzen Sie die Tabelle in der Datei Blumen.pdf als Webseite im HTML-Format um. Gehen Sie wie folgt vor: 1. Legen Sie einen neuen Ordner mit dem Namen „Blumen“ an. Ihre Webseite mit dem Namen Blumen.html soll in diesem Ordner gespeichert werden. 2. Laden Sie sich die zip-Datei „Blumenbilder.zip“ vom Übungsserver herunter. Entpacken Sie die zip-Datei im Ordner „Blumen“. 3. Erstellen Sie nun die Webseite Blumen.html im Editor. Bei der Angabe der Bild-Tags müssen Sie auf die richtige Pfadangabe achten. Beispiel: <img src=“/Blumenbilder/Malve 52.jpg“ width=… Geben Sie die Namen der Blumen als Tooltip an (alt-Tag)! 4. Lassen Sie sich die Webseite im Browser anzeigen. Benennen Sie den Ordner „Blumenbilder“ zu „images“ um und passen Sie den HTML-Code entsprechend an. Aufgabe 8 – Komplexaufgabe Setzen Sie den Text in der Datei „Hybrid Location Technologies.pdf“ als Webseite im HTML-Format um. Dabei sollen folgende Anforderungen erfüllt werden: 1. Auswahl geeigneter Tags für Hauptüberschrift und Unterüberschriften 2. korrekte Umsetzung aller Links 3. Umsetzung des Inhaltsverzeichnisses unter Verwendung von Ankern (id-Attribut) für die Überschriften (vgl. Aufgabe 4) Die benötigten Bilder können Sie sich hier herunterladen: http://electronicdesign.com/communications/essentials-hybrid-location-technologies#A-GPS/A-GNSS Gehen Sie beim Abspeichern der Bilder vor wie in Aufgabe 7.