BBS203 Praktikum 1

1
Zweite HTML-Übungen –
CSS, div, Formulare Einstieg.
Bearbeiten Sie die folgenden Aufgaben...
Möglichst in Zweierteams!
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik
9. Aufgabe: Vorbereitende Übung mit CSS, eigene Experimente
2
9. Aufgabe a:
1.) Erzeugen Sie mit Notepad++ eine Datei meincss.css mit z.B. dem unten
gezeigten Inhalt.
2.) Binden Sie die Datei in zwei Ihrer HTML-Dateien ein
3.) Testen Sie nur lokal.
9. Aufgabe b:
1.) Fügen Sie mit Notepad++ in meincss.css zwei weitere Tags hinzu.
2.) Speichern Sie und testen Sie die Auswirkungen auf beide Dateien
3.) Testen Sie nur lokal.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik
Hinweise und Lernziele zur 10. Aufgabe
3
Ein mächtiges Instrument ist das HTML Statement <div>.
Es dient dazu, ganze Bereiche zu kennzeichnen und einheitlich mit CSS
zu formatieren.
Siehe dazu:
http://de.selfhtml.org/html/text/bereiche.htm#block
http://www.css4you.de/wslayout1/index.html
Beispiel:
<div style="text-align:center; padding:20px; border:thin solid red; margin:25px">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:red">alles!</span></li>
</ul>
</div>
Lernziele: Sie können eine Web-Site mit mehreren HTML-Seiten aufbauen, die mit mit
<div> in einem Navigations- und einem Inhaltsbereich unterteilt sind.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik
10. Aufgabe: Seiten mit <div> strukturieren in acht Schritten
1. Teilen Sie Ihre persönliche Seite ueber_mich.html in zwei syntaktisch
vollständige HTML-Dateien
index.html und kompetenzen.html auf.
auf, speichern Sie diese auf Ihrem Arbeitsplatzrechner im Verzeichnis
C:\HTML\.
2. Testen Sie beide HTML-Seiten auf Ihrem Rechner mit dem Browser.
Sind beide Seiten sauber mit </body></html> abgeschlossen?
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik
4
10. Aufgabe: Seiten mit <div> strukturieren in acht Schritten
3. Lesen Sie nun, sofern Sie sich noch unsicher fühlen, unter
http://de.selfhtml.org zum Thema <div> nach.
4. Erstellen Sie dann zunächst in index.html einen Navigationsbereich.
Dazu können Sie sich an dem einfachen Beispiel div.html
(http://claus-brell.de/.../p/bc123456/div.html)
orientieren.
5. Testen Sie, ob die Verlinkung zu index.html selber und zu
kompetenzen.html funktioniert.
6. Laden Sie die Dateien in Ihr Verzeichnis ins Internet hoch und testen
Sie erneut.
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik
5
11. Aufgabe Formulare
6
Probieren vor Studieren…..
Arbeitsauftrag:
1.) Fügen Sie mit Notepad++ in Ihrer Datei index.html den unten gezeigten
Quelltextschnipsel für die Google-Suche ein.
2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.
Quelltextschnipsel:
<form method="get" action="http://www.google.de/search" target="_blank">
Suchbegriff eingeben:<br>
<input type="text" name=q size="60">
<input type="submit" name="x" value="mit Google suchen">
</form>
Ergebnis:
Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik