Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben...

Größe: px

Ab Seite anzeigen:

Download "Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben..."

Lothar Glöckner
vor 8 Jahren
Abrufe

1 1 Erste HTML-Übungen einfache Seiten. Bearbeiten Sie die folgenden Aufgaben... Möglichst in Zweierteams!

2 1. Aufgabe: Notepad++ als Editor einrichten (für Windows) 2 Notepad++ für zuhause: Download von Wählen Sie: Notepad++ zip package : Don't want to use installer? Check this one (zip format). Vorteil: funktioniert auch auf USB-Stick. Falls sich Notepad++ bereits auf dem Rechner befindet, kann die Aufgabe übersprungen werden. Arbeitsschritte : 1. Verzeichnis DATEN auf c:\ anlegen. Verzeichnis notepad++ auf c:\daten anlegen. 2. Datei npp bin.zip auf c:\daten\notepad++ kopieren. 3. npp bin.zip öffnen und in c:\daten\notepad++ entpacken. 4. c:\daten\notepad++\notepad++.exe starten. 5. Settings Preferences Language English auf German umstellen.

3 Editoren für den Mac 3 Atom Oder TextMate 3 (Empfehlung)

$) Schreiben Sie Ich bin ein einfacher Text in Zeile 1 und Ihre Vornamen in Zeile 2 b.) Speichern Sie unter c:\daten\html\text.html c.$

4 2. Aufgabe: Eine Datei mit Notepad++ erstellen 4 So ähnlich sollte Notepad++ bei Ihnen aussehen. 2. Aufgabe : a.) Schreiben Sie Ich bin ein einfacher Text in Zeile 1 und Ihre Vornamen in Zeile 2 b.) Speichern Sie unter c:\daten\html\text.html c.) Doppelklicken Sie auf c:\daten\html\text.html (sollte mit Browser geöffnet werden.)

5 3. Aufgabe (nur BBS): Datei auf Übungsserver hochladen 5 Hinweise: Zum Ausprobieren (funktioniert auch von Zuhause) gibt es für jeden ein Verzeichnis auf einem Internet-Server: (Achtung: die Punkte müssen durch etwas anderes ersetzt werden) xxyyzz ist Ihre Matrikelnummer!!! Beispiel: Sie heißen Hansi Mustermann und haben die Matrikelnummer Dann: mh Sie können Dateien hochladen und löschen. Dazu rufen Sie in Ihrem Internet- Verzeichnis das Unterverzeichnis ADM auf, z.b. Aufgabe3 : a.) Laden Sie nun Ihre Datei text.html auf Ihr Internet-Verzeichnis hoch. b.) Testen Sie Datei mit dem Browser. Geben Sie in die Bearbeitungszeile ein.

6 3. Aufgabe (nur Sommerakademie): Datei auf Übungsserver hochladen 6 Hinweise: Zum Ausprobieren (funktioniert auch von Zuhause) gibt es für jeden ein Verzeichnis auf einem Internet-Server: (Achtung: die Punkte müssen durch etwas anderes ersetzt werden) xx ist eine laufende Nummer (z.b. 04)!!! Beispiel: Sie haben die Nummer 04 Sie können Dateien hochladen und löschen. Dazu rufen Sie in Ihrem Internet- Verzeichnis das Unterverzeichnis ADM auf, z.b. Aufgabe3 : a.) Laden Sie nun Ihre Datei text.html auf Ihr Internet-Verzeichnis hoch. b.) Testen Sie Datei mit dem Browser. Geben Sie in die Bearbeitungszeile ein.

7 Info: Erstes Zwischenergebnis 7 Sie können nun im Prinzip - HTML-Seiten erstellen und im Internet ablegen. Achtung: text.html enthält kein syntaktisch richtiges HTML! Für die nächsten Schritte benötigen Sie ein wenig Grundverständnis über die Funktionsweise des Internet. Damit Ihre Internetseiten Struktur und Aussehen bekommen, benötigen Sie Kenntnisse in HTML und in CSS. Wenn Sie Ihre eigene Internet-Seite aufsetzen wollen, benötigen Sie außerdem einen Internet-Provider. Wenn Sie viele gleichartige Seiten erstellen wollen oder im Team an einer Website arbeiten, werden Sie ein sogenanntes Content Management System (CMS) einsetzen. Joomla, Contao, Typo3, NPS5, Drupal, Wordpress sind solche Systeme. Das wird hier nicht geübt.

8 4. Aufgabe: richtige HTML-Seite erstellen 8 <html> <head> <title>geschachtelte Listen</title> </head> <body> <h1>ich bin eine Überschrift</h1> Es folgt eine <br> Auflistung: <ul> <li>[mein Name]</li> <li>meine Lieblingsmusik: <ol> <li>[ein Lied]</li> <li>[noch ein Lied]</li> </ol> </li> <li>[name des Nachbarn]</li> </ul> </body> </html> 4. Aufgabe: a.) Erzeugen Sie mit Notepad++ eine Datei geschachtelte_listen.html mit dem oben gezeigten Inhalt. Speichern Sie die Datei in c:\daten\html\ b.) Testen Sie die Datei mit dem Browser. c.) Laden Sie die Datei auf den Internet-Server hoch und testen Sie dort mit d.) optional: wer schnell fertig ist sollte etwas damit spielen.

5. Aufgabe: geschachtelte Tabellen erstellen 9 5. Aufgabe: a.) Erzeugen Sie mit Notepad++ eine Datei geschachtelte_tabelle.html mit dem oben gezeigten Inhalt.

9 5. Aufgabe: geschachtelte Tabellen erstellen 9 5. Aufgabe: a.) Erzeugen Sie mit Notepad++ eine Datei geschachtelte_tabelle.html mit dem oben gezeigten Inhalt. Speichern Sie die Datei. b.) Testen Sie lokal mit dem Browser und laden Sie dann hoch. d.) optional: spielen Sie mit der Tabelle, bauen Sie Listen in die Tabellenfelder

6. Aufgabe: Bilder einbinden (direkt in Tabelle) 10 6. Aufgabe: a.) Kopieren Sie von http://claus-brell/.../../bc123456/adm die Bilddatei stein.

10 6. Aufgabe: Bilder einbinden (direkt in Tabelle) Aufgabe: a.) Kopieren Sie von die Bilddatei stein.jpg in Ihr Verzeichnis oder nehmen Sie eine andere Bilddatei. b.) Erzeugen Sie mit Notepad++ eine Datei bild.html mit dem unten gezeigten Inhalt. c.) Testen und laden Sie hoch wie gewohnt. Laden Sie auch stein.jpg hoch.

11 7. Aufgabe: einfache nummerierte Liste mit <ol> erstellen 11 Ziel der Aufgabe ist es, mit den Tags <ol> und <li> eine geordnete Liste zu erstellen. Es ist nicht Ziel, die geordnete Liste mit anderen Tricks zu erstellen. Das Ergebnis soll in etwa so aussehen: 7. Aufgabe: a.) Suchen Sie in Google nach den Suchworten geordnete liste ul selfhtml b.) Schauen Sie sich dann in der Ergebnisliste die Seite HTML/Textstrukturierung/ol SELFHTML-Wiki an. c.) Erstellen Sie mit Notepad++ eine Datei geordnete_liste.html, in der Sie drei Listeneinträge unterbringen. d.) Testen Sie die Datei lokal mit dem Browser, laden Sie sie hoch, wenn Sie mit dem Ergebnis zufrieden sind.

12 8. Aufgabe(nur BBS203): erste umfangreichere HTML-Seite erstellen 12 Lernziele: Sie können einfache HTML-Seiten erstellen. Ziel ist es, eine Getränkepreisliste zu erstellen. Hinweis: Verwenden Sie die HTML-Befehle <table>, <tr>, <td>, <ul> <ol> <li>. Sie finden die Befehle unter Sie können und sollen in Zweierteams arbeiten! Jeder sollte allerdings die Aktivitäten des Anderen verstanden haben. 8. Aufgabe: a.) Kopieren Sie mit zuerst mit dem Browser von die Beispieldateien Rohtext (pl.txt), Bilddateien (drache100.jpg, flasche02.jpg und flasche03.jpg) in Ihr lokales Verzeichnis c:\daten\html\. b.) Erstellen Sie mit Notepad++ eine HTML-Seite getraenkepreisliste.html, die am Ende etwa so aussehen soll wie der ausgegebene Screenshot. Verwenden Sie die heruntergeladenen Vorlagen. c.) Testen Sie das Aussehen Ihrer Seite zunächst lokal, indem Sie sie aus c:\daten\html\ mit dem Browser öffnen. Dann hochladen. d.) Testen Sie in Ihrem Verzeichnis

13 8. Aufgabe(nur Sommerakademie): erste HTML-Seite selbst erstellen 13 Lernziele: Sie können einfache HTML-Seiten erstellen. Ziel ist es, eine persönliche Internet- Informationsseite zu erstellen. Hinweis: Verwenden Sie die HTML-Befehle <table>, <tr>, <td>, <ul> <ol> <li>. Sie finden die Befehle unter Sie können und sollen in Zweierteams arbeiten! Jeder sollte allerdings die Aktivitäten des Anderen verstanden haben. 8. Aufgabe: a.) Die Seite soll Ihren Namen, Ein paar persönliche Angaben und Ihre Kompetenzen und/oder Interessen enthalten. Überlegen Sie sich einen Seitaufbau, skizzieren Sie ihn mit Stift und Papier b.) Erstellen Sie mit Notepad++ eine der Skizze entsprechene HTML-Seite ueber_mich.html. Verwenden Sie Bilder aus dem Internet (Achtung Urheberrecht). c.) Testen Sie das Aussehen Ihrer Seite zunächst lokal, indem Sie sie aus c:\daten\html\ mit dem Browser öffnen. Dann hochladen. d.) Testen Sie in Ihrem Verzeichnis

14 Erreichte Lernziele 14 Sie können: Einfache HTML-Seiten erstellen und ins Internet bringen. Seiten durch Listen und Tabellen strukturieren. Bilder in Seiten einbinden.

Ähnliche Dokumente

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik

Aufgaben HTML Formulare. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, claus.brell@hs-niederrhein.de, Wirtschaftsinformatik, Statistik 1 Aufgaben HTML Formulare Aufgabe 1 (Vorbereitung) Google Suche 2 Probieren vor Studieren.. Arbeitsauftrag: 1.) Fügen Sie mit Notepad++ in Ihrer Datei index.html den unten gezeigten Quelltextschnipsel