Übung zu HTML-CSS
Werbung
Workshop HTML, CSS, JavaScript
Als Aufzählungszeichen werden Kästchen ( ) verwendet, die Sie nach dem Bearbeiten
der Aufgabe jeweils abstreichen können. So soll verhindert werden, dass Sie aus
Versehen Aufgaben auslassen.
1. Einfache HTML-Seite
Öffnen Sie den Editor (Start - Programme - Zubehör - Editor) und speichern Sie die
Datei unter dateiname.html
Schreiben Sie eine einfache HTML-Seite wie folgt:
<html>
<head>
<title>Meine Seite</title>
</head>
<body>
<h1>Meine Website</h1>
<p>Ist doch toll, nicht?</p>
</body>
</html>
Speichern Sie erneut und schauen Sie sich das Resultat im Browser an.
Streichen Sie die Aufgaben ab, die Sie schon erledigt haben :-)
Vergegenwärtigen Sie sich, was die einzelnen Tags bedeuten.
Wo wird der Titel der Webseite angezeigt?
Erweitern Sie die Webseite um folgenden Absatz. Verwenden Sie zur Formatierung
des Absatzes die folgenden Tags:
<p> Diese Webseite ist das Resultat eines Workshops zum Kennen lernen von HTML, CSS
und JavaScript.
<b> ... </b> für fetten Text
<i>... </i> für kursiven Text
<u>...</u> zum Unterstreichen
<div align="center">...</div> zum zentrieren eines Bereichs
<br> für Zeilenumbruch
2. Bild einbinden
Bauen Sie ein Bild in Ihre Webseite ein. Sie können entweder direkt auf ein Bild im
Internet verweisen (Beispiel 1), oder auf ein Lokal gespeichertes Bild zugreifen, das
im selben Ordner wie Ihre Webseite gespeichert ist (Beispiel 2):
<img src="http://www.fhso.ch/pics/logo.jpg" alt="FHSO Logo" border="0">
oder
<img src="logo.jpg" alt="FHSO Logo" border="0">
Testen Sie wiederum mit dem Browser das Resultat
Workshop HTML, CSS, JavaScript
25.4.2005 / André Jäggi, Rolf Dornberger
Seite 1 von 4
3. Link einbauen
Erweitern Sie Ihre Webseite um einen Link auf die Fachhochschul-Webseite
<a href="http://www.fhso.ch">Link zur Fachhochschule</a>
Testen Sie das Resultat wiederum im Browser
4. Tabelle einbauen
Erweitern Sie Ihre Webseite um eine Tabelle wie folgt:
<table border="2">
<tr>
<td><h2>Titel 1</h2></td>
<td><p>Inhalt der Zelle 1</p></td>
</tr>
<tr>
<td><h2>Titel 2</h2></td>
<td><p>Inhalt der Zelle 2</p></td>
</tr>
</table>
Testen Sie das Resultat im Browser
Streichen Sie die Aufgaben ab, die Sie schon erledigt haben :-)
Wofür stehen die Tags <tr> und <td>? Erweitern Sie die Tabelle auf drei Spalten oder
drei Zeilen
5. Formatierung mit CSS
Für die Formatierung setzen wir CSS ein. Ergänzen Sie den Header Ihres HTMLDokuments mit folgender CSS-Anweisung.
<style type="text/css">
<!-h1 { font-family: Verdana; text-align: center; color: #FF0000;}
-->
</style>
Testen Sie das Resultat im Browser. Die Überschrift solle nun rot und zentriert sein.
Ergänzen Sie die CSS-Anweisung um eine Format-Anweisung, die für den ganzen
Body gilt:
body { font-family: Verdana;}
Workshop HTML, CSS, JavaScript
25.4.2005 / André Jäggi, Rolf Dornberger
Seite 2 von 4
6. Formular
Zur Eingabe von Daten werden häufig Formulare verwendet. Erweitern Sie Ihre
Webseite um ein Formular.
<form name = "Rechner">
<input type="Text" name="Feld1">
<input type="Text" name="Feld2">
</form>
Testen Sie das Resultat im Browser.
Verwenden Sie Zeilenschaltung <br> und Text <p> um das Formular wie folgt
darzustellen:
Addition
Zahl 1:
Zahl 2:
Testen Sie das Resultat im Browser.
Fügen Sie dem Formular einen Button hinzu.
<input type="button" value="Berechnen">
7. Funktionalität mit Java-Script
Nun ergänzen wir den Button um Funktionalität, die mit JavaScript realisiert wird.
Dazu fügen wir dem Button einen Event-Handler hinzu
.
<input type="button" value="Berechnen" onClick="Ergebnis()">
"Ergebnis()" ruft eine Funktion auf, die wir erst im Header programmieren müssen.
Zum Anfangen besteht die Funktion darin, eine Meldung anzuzeigen. Ergänzen Sie
den Header mit folgendem JavaScript-Code:
<script type="text/javascript">
function Ergebnis () {
alert("Hier steht später das Resultat")
}
</script>
Testen Sie das Resultat im Browser. Ein Klick auf den Button sollte ein Meldung
auslösen.
Workshop HTML, CSS, JavaScript
25.4.2005 / André Jäggi, Rolf Dornberger
Seite 3 von 4
Nun ändern wir den JavaScript Code so ab, dass die Meldung den Inhalt der beiden
Formularzellen ausgibt. Dazu verwenden wir Variablen, in denen die Werte
zwischengespeichert werden. Beachten Sie, dass für die Meldung Text in
"Anführungs- und Schlusszeichen" eingeschlossen ist, Variabeln hingegen nicht.
<script type="text/javascript">
function Ergebnis () {
Z1 = window.document.Rechner.Feld1.value
Z2 = window.document.Rechner.Feld2.value
alert("Hier steht später das Resultat der Rechnung " + Z1 + " plus " + Z2)
}
</script>
Testen Sie das Resultat im Browser. Die Meldung soll nun die beiden Zahlen
beinhalten.
Um das Resultat der Berechnung zwischenzuspeichern führen wir eine dritte Variable
ein und verwenden die Funktion eval() um die Berechnung durchzuführen. Ändern sie
den JavaScript-Code entsprechend ab.
<script type="text/javascript">
function Ergebnis () {
Z1 = window.document.Rechner.Feld1.value
Z2 = window.document.Rechner.Feld2.value
R = eval(Z1 + "+" + Z2)
alert("Das Resultat lautet: " + R)
}
</script>
8. Zusatzaufgaben
Klicken Sie beim Anzeigen Ihrer Webseite im Browser auf die rechte Maustaste und
wählen Sie den Befehl "Quelltext anzeigen". Kommt Ihnen der Quelltext bekannt vor?
Betrachten Sie den Quelltext von anderen Webseiten (z.B. www.fhso.ch,
de.selfhtml.org). Können Sie nun Teile des Quelltexts lesen und verstehen?
Lesen Sie sich ins Thema Frames ein auf der Seite de.selfhtml.org (im Abschnitt
HTML/XHTML → Frames)
Workshop HTML, CSS, JavaScript
25.4.2005 / André Jäggi, Rolf Dornberger
Seite 4 von 4
