Tworzenie Stron
Internetowych

W oparciu o język html

Część II

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Dokumenty
złożone

To takie (strony), w których w jednym oknie
możliwe jest prezentowanie kilku dokumentów
jednocześnie. Okno przeglądarki jest wtedy
dzielone na kilka części – ramek. W każdej
ramce umieszczony jest inny dokument, Jeden z
nich często zawiera odsyłacze do stron
prezentowanych w innej ramce.

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

22.11.2021

Przykłady stron złożonych z
ramek

Przykład I – Układ trzech ramek
poziomych

ramka1

ramka II

ramka III

Zespół Szkół w Grzęsce
Marek Szymanowski

22.11.2021

Schemat ramek przykładu I

W każdej ramce umieszczona jest inna strona o podanej
nazwie.
W ramce I (nagłowek.html ) znajduje się tekst
reklamowy lub baner.
Jej wysokość określa parametr rows gdzie „x” to ilość
pikseli.
W ramce II (linki.html ) znajdują się odsyłacze do
poszczególnych stron. Ramka ta jest często nazywana
MENU.
W ramce III (strona1.html ) znajdują się strony z treścią
do których odnośniki występują w ramce II.

nagłowek.html rows=„x”

linki.html rows=„x”

strona1.html

ramka1

ramka II

ramka III

Zespół Szkół w Grzęsce
Marek Szymanowski

22.11.2021

Przykłady stron złożonych z
ramek

Przykład II – Układ ramek poziomych
i pionowych

ramka1

ramka II

ramka III

Zespół Szkół w Grzęsce
Marek Szymanowski

22.11.2021

Schemat ramek przykładu II

W ramce I (naglowek.html ) znajduje się tekst
reklamowy lub baner.
Jej wysokość określa parametr rows gdzie „x” to ilość
pikseli.
W ramce II (linki.html ) znajdują się odsyłacze do
poszczególnych stron - MENU. Parametr cols określa
szerokość ramki gdzie „y” to % całej szerokości strony a
* to pozostała jej część.
W ramce III (strona1.html ) strony z treścią do których
odnośniki występują w ramce II.

naglowek.html rows=„x”

linki.html

cols=„y

%,*”

strona1.html

ramka1

ramka II

ramka III

Zespół Szkół w Grzęsce
Marek Szymanowski

22.11.2021

Przykłady stron złożonych z
ramek

Przykład III – Układ czterech ramek poziomych i
pionowych

ramka1

ramka II

ramka IV

ramka III

Zespół Szkół w Grzęsce
Marek Szymanowski

linki2.ht

22.11.2021

Schemat ramek przykładu III

W ramce I (naglowek.html ) i w ramce II (linki.html )
znajdują się odsyłacze jak w przykładzie poprzednim.
W ramce III (strona1.html ) występują strony z treścią
do których odnośniki występują w ramce II. Parametr
cols określa szerokość ramki gdzie „z” to % pozostałej
szerokości strony z ramki II.
W ramce IV znajdują się np. statystyki strony, sondy,
reklamy itp.

naglowek.html rows=„x”

linki.html

cols=„y

%,*”

strona1.html

cols=„z%,*”

ramka1

ramka II

ramka IV

ramka III

Zespół Szkół w Grzęsce
Marek Szymanowski

W pierwszej kolejności tworzymy strony
składowe: naglowek.html

<html>
<body bgcolor="#99CCFF">
<center>

Strona Uczniów Zespołu Szkół w Grzęsce
</center>
</body>
</html>

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Tworzenie dokumentu złożonego w
oparciu o przykład I

<html>
<body bgcolor="#66CCCC">
<center>
<a href="strona1.html" target="Ramka3">Informatyka Grupa I</a>
&nbsp | &nbsp
<a href="strona2.html" target="Ramka3">Informatyka Grupa II</a>
</center>
</body>
</html>
Target - Atrybut definiuje okno docelowe dla
otwieranego dokumentu (_blank-nowe okno, _self – z
którego nastąpiło odwołanie)

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Następnie tworzymy stronę z
odsyłaczami – menu: linki.html

<html>
<body bgcolor="#33CCCC">
<center>

Strona Uczniów Grupy I
</center>
</body>
</html>

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Tworzymy strony z
treścią:

strona1.html

<html>
<body bgcolor="#33CCCC">
<center>

Strona Uczniów Grupy II
</center>
</body>
</html>

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

strona2.html

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Następnie tworzymy stronę główną
zawierającą ramki- index.html

<html>

<noframes>
Twoja przeglądarka nie obsługuje ramek
<noframes>

</html>

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Znaczenie parametrów

<frameset> – tworzy ramki (zamiast <body>)

frameborder="0” - określa, czy linie podziału mają
być widoczne
framespacing="0” – dodatkowy odstęp między
ramkami (piksele)
rows – podział na wiersze (piksele lub %, * to reszta
strony)
cols – podział na kolumny (piksele lub %, * to reszta
strony)

<frame> - określa zawartość ramki
src="naglowek.html" – adres do wyświetlanej strony
name="Ramka1” – nazwa ramki
scrolling="no" - ramka nie będzie przewijana
noresize – nie można zmieniać szerokości ramki w
przeglądarce

tworzymy stronę: naglowek.html
Przygotowujemy baner – logo.jpg o
wymiarach 1030x160

<html>
<body bgcolor="#99CCFF">
<center><img

src="logo.jpg">

</center>
</body>
</html>

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Tworzenie dokumentu złożonego w
oparciu o przykład II

Przygotowujemy przyciski – link1.jpg i link2.jpg o
wymiarach np. 110x40

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Tworzenie dokumentu złożonego w
oparciu o przykład II – plik
linki.html

Jako pliki z treścią:
strona1.html oraz strona2.html
mogą być wykorzystane te, które
zostały stworzone w ćwiczeniu 1.
Plików z treścią może być więcej.

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Tworzenie dokumentu złożonego w
oparciu o przykład II – pliki z treścią

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Tworzenie dokumentu złożonego w
oparciu o przykład II – Tworzenie
index.html

<html>

<noframes>
Twoja przeglądarka nie obsługuje ramek
<noframes>

</html>

22.11.2021

Zespół Szkół w Grzęsce
Marek Szymanowski

Efekt końcowy strony internetowej
w dużej mierze zależy od
pomysłowości twórcy!!!

Język html daje ograniczone możliwości lecz można
stosować bardziej zaawansowane techniki jak:
kaskadowe arkusze stylów CSS, aplety Java script,
czy język tworzenia stron PHP.

Życzę powodzenia w

nabywaniu nowych

umiejętności !!!

Document Outline

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19

Tworzenie Stron Internetowych pptx

Document Outline