MS 9. Klasse > Informatik 9 > Informationsaustausch 9 >

Filius: Webseite ändern 0034

Nachdem wir in der letzten Aufgabe einen Webserver installiert haben, wollen wir nun die Webseite anpassen. Dafür müssen wir den HTML (Hypertext Markup Language) Code der index.html Datei ändern.

Webseite des Webservers.

1. Aufgabe

  • Installiere auf dem Webserver die Software „Text-Editor“.
  • Öffne mit der Software „Text-Editor“ die Datei „index.html„.
  • Ersetze den bestehenden Code mit folgendem:
<html>
	<head>
		<title>Meine Webseite</title>
	</head>
	<body bgcolor="#FF6347" color="#FFFFFF" >
		<center>
			<h2>Meine eigene Seite!</h2>
			<p>Herzlich Willkommen auf meiner Webseite</p>
			<img src="splashscreen-mini.png"/>
			<p>Ich freue mich, dass Sie diese Seite besuchen.</p>
		</center>
		<p><a href=kontakt.html>Kontaktseite</a></p>
	</body>
</html>
  • Starte den Webserver erneut und schau dir die veränderte Seite an:

Jetzt wollen wir eine zweite Seite hinzufügen, auf der wir ein paar Kontaktdaten ausgeben.

2. Aufgabe

  • Nutze den Text-Editor und erstelle eine neue Datei mit dem Namen: „kontakt.html„
  • Füge folgenden HTML Code ein, speichere die Datei und starte den Webserver.
  • Öffne mit dem Browser eines Laptops die Webseite und klicke unten auf den Link „Kontaktseite“.
<html>
	<head>
		<title>Kontakt</title>
	</head>
	<body bgcolor="#3F8FFF" color="#FFFFFF">
		<h1>Meine Kontaktseite </h1>
		<p>Name: Richi</p>
		<p>Telefon: 0123456</p>
		<p>E-Mail: richi@example.com</p>
	</body>
</html>

Für Schnelle

  • Füge der Kontaktseite einen „zurück“ Link hinzu, der den Nutzer wieder zurück zur roten Startseite bringt.
  • Importiere mit Hilfe der Software „Datei-Explorer“ ein eigenes Bild und füge dieses der Kontaktseite hinzu.

unsere-schule.org

×

Filius: Webseite ändern

Code: 0034