Ramki (6)
Tomasz Bartuś
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>
<title>Ćwiczenie praktyczne - HOME</title>
<meta charset="utf-8">
</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>
Podgląd home.html
Zachowaj poniższy kod jako tutaj.html
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - TUTAJ</title>
<meta charset="utf-8">
</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>
podgląd tutaj.html
Zachowaj poniższy kod jako tam.html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - TAM</title>
<meta charset="utf-8">
</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>
Podgląd tam.html
Podgląd index.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>
<title>Ćwiczenie praktyczne - Katalog</title>
<meta charset="utf-8">
</head>
<body bgcolor="#FFFFFF">
<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="_top">AGH</a><br>
<a href="http://www.wggios.agh.edu.pl/" target="_top">WGGiOŚ</a><br>
<a href="http://home.agh.edu.pl/bartus/" target="_top">Tomasz Bartuś</a>
</p>
</body>
</html>
Podgląd index.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>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</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>
Podgląd index.html
Zakończyliśmy koleną część kursu ;).
