Utwórz trzy osobne pliki html: home.html, tutaj.html i tam.html. Skopiuj do nich umieszczone poniżej, właściwe fragmenty kodu.
Zachowaj poniższy kod jako home.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - HOME</title>
</head>
<body style="background-color: #fff;">
<h1 style="text-align: center;">HOME</h1>
<p>
Witam w home! Ta strona powinna być atrakcyjna. O chęci pozostania na stronie WWW decydują pierwsze 2 sekundy kontaktu.
</p>
<p style="text-align: center;">
Przyjemnego pobytu!
</p>
</body>
</html>
Zachowaj poniższy kod jako tutaj.html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - TUTAJ</title>
</head>
<body style="background-color: #fff;">
<h1 style="text-align: center;">TUTAJ</h1>
<p>
Witam TUTAJ. Tu jest miejsce, dla pierwszej podstrony.
</p>
</body>
</html>
Zachowaj poniższy kod jako tam.html.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - TAM</title>
</head>
<body style="background-color: #fff;">
<h1 style="text-align: center;">TAM</h1>
<p>
Witam TAM. Tu jest miejsce, dla drugiej podstrony.
</p>
</body>
</html>
No tak..., zapomnieliśmy o wskazaniu w linkach, do której ramki mają zostać załadowane pliki! Otwórzmy plik katalog.html i dodajmy niezbędne atrybuty target.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - Katalog</title>
</head>
<body bgcolor="#fff">
<h3>Katalog</h3>
<p>
<a href="home.html" target="tresc">Home</a><br>
<a href="tutaj.html" target="tresc">Tutaj</a><br>
<a href="tam.html" target="tresc">Tam</a><br>
</p>
<p>
<a href="http://www.agh.edu.pl/" target="_blank">AGH</a><br>
<a href="http://www.wggios.agh.edu.pl/" target="_blank">WGGiOŚ</a><br>
<a href="http://home.agh.edu.pl/bartus/" target="_blank">Tomasz Bartuś</a>
</p>
</body>
</html>
Eureka! Dzieła! Na koniec proponuję pozbyć się widocznych krawędzi ramek. Otwórzmy plik index.html i wprowadźmy niezbędne modyfikacje.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</head>
<frameset rows="83,*" frameborder="no">
<frame src="baner.html" scrolling="no" marginwidth="1" marginheight="1">
<frameset cols="20%,80%" frameborder="no">
<frame src="katalog.html">
<frame src="home.html" name="tresc">
</frameset>
</frameset>
</html>
Zakończyliśmy kolejną część kursu ;).