Forum PŚk

inc

Politechnika Świętokrzyska w Kielcach
Wydział Mechatroniki i Budowy Maszyn
Zakład Technik Komputerowych i Uzbrojenia
Rok I, semestr II, Podstawy Informatyki – laboratorium
Opracował: mgr inż. Konrad Stefański

Ćwiczenia laboratoryjne nr 9 i 10

PODSTAWY TWORZENIA STRON WWW W JĘZYKU HTML

1. Struktura dokumentu HTML:

<html>
<head>Informacje w nagłówku</html>
<body>
Właściwa treść dokumentu (ciało)
</body>
</html>

Dokument HTML zbudowany jest ze znaczników umieszczonych w ostrych nawiasach. Każdy otwarty znacznik <znacznik> (z nielicznymi wyjątkami) musi być w odpowiednim miejscu zamknięty w następujący sposób: </znacznik>.

Przykład 1.
W folderze o ścieżce dostępu: d:\Dydaktyka\Rok I\MiBM\nr_grupy utwórz folder „Zaj_nr_9_10”. Znajdź plik o nazwie „sunset.jpg” (Start-->Wyszukaj-->Pliki lub foldery...-->Pliki i foldery-->nazwa_pliku) i skopiuj go do folderu „Zaj_nr_9_10”. Otwórz program „Notatnik” i zapisz pusty plik w folderze „Zaj_nr_9_10” pod nazwą „strona1.htm” lub „strona1.html”. Od tej pory wszystkie tworzone strony i pliki potrzebne do ich funkcjonowania muszą być zapisywane w tym folderze! Nie zamykając programu „Notatnik” otwórz folder „Zaj_nr_9_10”. Powinien być w nim zapisany plik „strona1” oznaczony ikonką:

Jeśli tak nie jest to znaczy, że gdzieś został popełniony błąd. Jeśli wszystko jest w porządku, kliknij dwukrotnie na tą ikonę – plik powinien otworzyć się w przeglądarce. Zwiń okienko przeglądarki i folderu „Zaj_nr_9_10” do paska i wprowadź w programie notatnik poniższy tekst, zaczynając od znaczników rozpoczynających i kończących dokument <html> i </html>. Po wprowadzeniu każdego wiersza zapisz dokument (Ctrl+S), w przeglądarce wciśnij przycisk „Odśwież” i zaobserwuj zmiany.

<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=windows-1250”>
<title>Strona pierwsza</title>
</head>
<body bgcolor="black" text="yellow">
<h1><center>STRONA INTERNETOWA</center></h1>

Witam. 
Mam na imię (Imię/Imiona). Jestem studentem I roku Wydziału Mechatroniki i Budowy Maszyn Politechniki Świętokrzyskiej w Kielcach.



Ciekawe zdjęcie


<center>
<img src="sunset.jpg" alt=" Granica między nocą i dniem" width="50%">
</center>
</body>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <html>, </html> – początek i koniec dokumentu HTML;
- <head>, </head> – początek i koniec nagłówka dokumentu;
znaczniki w nagłówku:
- <meta> – tu podajemy standard kodowania, datę utworzenia dokumentu, słowa kluczowe itp. (w tym przykładzie zastosowano standard kodowania: polski w przypadku strony tworzonej pod „Notatnikiem”);
- <title> – tytuł dokumentu (pojawi się on na pasku tytułowym przeglądarki);
- <body>, </body> – część gówna (ciało) dokumentu;
w części głównej:
- parametry wewnątrz znacznika <body>: bgcolor=”nazwa koloru” – kolor strony, text=”nazwa koloru” – kolor tekstu, link=”nazwa koloru” – kolor odyłacza, vlink=”nazwa koloru” – kolor odwiedzonego odsyłacza, alink=”nazwa koloru” – kolor aktywnego odsyłacza, topmargin=”X” – górny margines (X – wartość w pikselach), leftmargin=”X’ – lewy margines (kolory można podawać poprzez wpisanie ich nazwy np.: silver, gray, maron, greek, purple, navy, olive, dive, teal, white, black, red, lime, blue, Magenta, yellow, cyan, aqua, fuchsia lub za pomocą trypletu szesnastkowego np.: #FF0000, #000000, #008000 bądź systemem RGB np.: RGB(0,0,0), RGB(255,0,0), RGB(0,128,0).
- <h1> do <h6> – wielkość liter nagłówka;
- , , , <strike> – odpowiednio: pogrubienie, podkreślenie, pochylenie, przekreślenie tekstu;
- – ustalenie wysokości (size=”X” – wartość w pikselach), kroju (np. face=”Times New Roman”), koloru (np. color=”red”) czcionki wybranego fragmentu tekstu;
- – złamanie linii tekstu;
- – nowy paragraf (od poprzedniego bloku tekstu zostanie oddzielony interlinią; dodatkowo parametrem „align” można określić położenie tekstu na stronie np.: align=”right” – wyrównanie do prawej, align=”left” – wyrównanie do lewej (domyślnie).
- <img src=”nazwa_pliku_graficznego”> – umieszczenie w dokumencie grafiki (typy plików *.jpg, *.bmp, *.gif); dodatkowo parametry: alt=”tekst” – opis grafiki po najechaniu myszką, width=”X” – szerokość grafiki (X – wartość w pikselach lub w procentach szerokości okna), height=”X” – wysokość grafiki (podanie tylko szerokości lub tylko wysokości spowoduje proporcjonalne dopasowanie drugiego wymiaru); border=”X” – grubość obramowania (X – wartość w pikselach);
- do dokumentu HTML można wstawiać również elementy multimedialne np.: filmy – służy do tego znacznik: <img dynsrc=”nazwa_pliku_z_multimediami”, dodatkowo dodanie parametru start=”xxx” definiuje sposób rozpoczęcia odtwarzania wstawionego np.: filmu (xxx – onload lub mouseover – odpowiednio: rozpoczęcie odtwarzania po wgraniu strony i rozpoczęcie odtwarzania po najechaniu kursorem lub myszką).

2. Bardziej zaawansowane ale wciąż jeszcze podstawowe znaczniki w języku HTML.
2.1. Poziome linie rozdzielające.

Przykład 2.
Znajdź plik o nazwie „blumrbll.jpg” i skopiuj go do katalogu, w którym zapisujesz tworzone dokumenty. W programie „Notatnik” utwórz dokument o nazwie „linie.htm”. Wprowadź poniższy tekst naciskając co chwila przycisk „Odśwież” w oknie przeglądarki.

<html>
<head>
<title>Linie poziome</title>
</head>
<body background="blumrbll.jpg" text="blue">
<h1><center>Przykłady</center></h1>
<h3>Przykłady poziomych linii rozdzielających:


- linia cienka, przez całą szerokość okna:

<hr>
- linia cienka, wyśrodkowana, zajmująca 60% szerokości okna:

<hr width=60%>
- linia cienka, wyrównana do lewej strony, zajmująca 50% szerokości okna:

<hr width=50% align=left>
-linia grubości 15 pikseli, niewypełniona, wyrównana do prawej strony, zajmująca 70% szerokości okna:

<hr width=70% align=right size=15>
- linia grubości 8 pikseli, wypełniona, wyśrodkowana, długości 500 pikseli:

<hr width=500 size=8 noshade>
- linia grubości 4 pikseli, wypełniona, wyśrodkowana, długości 80% szerokości okna, koloru czerwonego:

<hr width=80% size=4 noshade color="red">
</body>
</html>

Nowe znaczniki użyte w tym przykładzie:
- <body background=”nazwa_pliku_graficznego”> – wczytanie grafiki jako tła strony;
- <hr> – wstawienie poziomej linii rozdzielającej; można dodać parametry: width=”X” – długość linii (X – wartość w pikselach lub w procentach), noshade – linia wypełniona (brak cienia), size=”X” – grubość linii (X – wartość w pikselach), color=”nazwa_koloru” – kolor linii, align=”xxx” – położenie linii w okienku (xxx – right, center; left – domyślnie).

2.2. Wypunktowanie i numerowanie.

Przykład 3.
Znajdź plik o nazwie „kundel.jpg” i skopiuj go do katalogu, w którym zapisujesz tworzone dokumenty. W programie „Notatnik” utwórz dokument o nazwie „listy.htm”. Wprowadź poniższy tekst.

<head>
<title>Wypunktowanie i numerowanie</title>
</head>
<body background="kundel.jpg" text="blue">
<h1><center>Przykłady list punktowanych i numerowanych</center></h1>



- wypunktowanie (kółeczko):


<ul>
<li>pozycja 1</li>
<li>pozycja 2</li>
</ul>


- wypunktowanie (okrąg):


<ul type="circle">
<li>pozycja 1</li>
<li>pozycja 2</li>
</ul>


- wypunktowanie (kwadracik):


<ul type="square">
<li>pozycja 1</li>
<li>pozycja 2</li>
</ul>


- numerowanie (cyfry arabskie od 1):


<ol>
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (cyfry arabskie od 5):


<ol start="5">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (cyfry rzymskie małe od 1):


<ol type="i">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (cyfry rzymskie małe od 4):


<ol type="i" start="4">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (cyfry rzymskie duże od 1):


<ol type="I">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (cyfry rzymskie duże od 9):


<ol type="I" start="9">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (litery łacińskie małe od a):


<ol type="a">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (litery łacińskie małe od d):


<ol type="a" start="4">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie (litery łacińskie duże od A):


<ol type="A">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>


- numerowanie litery łacińskie duże od G:


<ol type="A" start="7">
<li>Pozycja pierwsza</li>
<li>Pozycja druga</li>
</ol>

</body>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <ul> i </ul> – otwarcie i zamknięcie listy punktowanej, parametr type=”xxx” określa wygląd symbolu graficznego (xxx – circle, square, disc);
- <ol> i <ol> – otwarcie i zamknięcie listy numerowanej, parametr type=”X” określa w jaki sposób lista ma być numerowana (X – I, i, A, a, domyślnie cyfry arabskie), parametr start=”X” definiuje od jakiej wartości lista ma być numerowana (X – 1,2,3…);
- <li> – zdefiniowanie pozycji na liście.

2.3. Wstawianie cytatów i tekst preformatowany (z zachowaniem oryginalnego łamania linii i wszystkich spacji).

Przykład 4.
W programie „Notatnik” utwórz dokument o nazwie „cytat.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Cytaty i tekst oryginalny</title>
</head>
<body bgcolor="lime" text="gray">

W wielu miejscach w tekście zachodzi konieczność
przytoczenia cytatów. Poniższy tekst symuluje
wstawienie takiego cytatu i obrazuje różnicę między
nim, a blokiem innego tekstu:
<blockquote>

Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1
Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1
Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1
Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1 Cytat 1
Cytat 1 Cytat 1

</blockquote>
<blockquote>

<big>
Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2
Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2
Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2
Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2 Cytat 2

</blockquote>
<blockquote>


Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3
Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3
Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3 Cytat 3

</blockquote>
Istnieje również możliwość wstawienia do dokumentu bloku
tekstu "preformatowanego". Będzie w nim zachowany oryginalny
układ łamania linii i ilość spacji np.:
<pre>

Słowo słowo słowo słowo
słowo
słowo słowo słowo
słowo słowo

</pre>
</body>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <big>, – odpowiednio: zwiększenie i zmniejszenie wielkości czcionki o 1 w stosunku do rozmiaru globalnego;
- <blockquote> – wstawienie bloku cytatów (lewy i prawy margines automatycznie wcięty);
- <pre> – wstawienie bloku tekstu „przeformatowanego” (z zachowaniem oryginalnego łamania linii i wszystkich spacji, dla tego bloku domyślnym krojem czcionki jest „Courier New”;
- istnieje także możliwość używania górnych i dolnych indeksów – w tym celu należy użyć znaczników i ( „subscript” – indeks dony i „superscript” – indeks górny);
- możliwe jest również przekreślenie wybranego fragmentu tekstu – służy do tego znacznik <strike>.

2.4. Wzajemne rozmieszczenie grafiki i tekstu.

Przykład 5.
Znajdź pliki o nazwach „t.jpg”, „r.jpg”, „sw.jpg”, „elblag.jpg” i „prad.jpg” i skopiuj je do katalogu, w którym zapisujesz tworzone dokumenty. W programie „Notatnik” utwórz dokument o nazwie „grafika_i_tekst.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Wzajemne rozmieszczenie grafiki i tekstu</title>
</head>
<body bgcolor="red" text="white">

<center>
Wzajemne rozmieszczenie grafiki i tekstu na stronie
</center>
<h1>
- tekst umieszczony po prawej stronie grafiki:
<h3>
<img src="t.jpg" width=50% alt="Jedna z opcji właściwości
systemu operacyjnego Windows" border=6 align="left">
Rysunek przedstawiony obok pokazuje przykład jednej z możliwości
jaką daje system operacyjny Windows wyprodukowany przez firmę
Microsoft.</h3> 
 

- tekst umieszczony po lewej stronie grafiki:
<h3>
<img src="r.jpg" width=70% alt="Możliwości dawane
przez niektóre programy" border=6 align="right">
Zaprezentowany obok rysunek przedstawia możliwości
wyboru jakie dają niektóre programy.</h3>
 
 

- tekst umieszczony pośrodku po obu stronach grafiki:
<h3>
Rysunek ten przedstawia poglądy
<img src="sw.jpg" width=50% alt="Poglądy głoszone przez
wielkie autorytety w dawnych czasach" border=6 align="center">
głoszone na temat kobiet.
 
Oczywiście w dawnych czasach ale jednak przez wielkich ówczesnego świata...
</h3>
<center>
A więc czy w dzisiejszych czasach kobietom jest aż tak źle???!!!
</center>
 

- tekst umieszczony na górze po obu stronach grafiki:
<h3>
Czy na pewno polskie drogi są nienajlepiej
<img src="elblag.jpg" width=30% alt="Elbląg - Elbląg" border=6 align="top">
oznakowane? Chyba nie... To na pewno fotomontaż.</h3>
 
 

- tekst umieszczony na dole po obu stronach grafiki:
<h3>
Dobrze mieć swój dom... Ciepło,
<img src="prad.jpg" width=45% alt="Elbląg - Elbląg" border=6 align="top">
i na głowę nie pada deszcz czy śnieg...</h3>
</body>
</html>

Nowościami tu są:
- parametr clear=”xxx” używany do znacznika (xxx – left, right, center, top) służący do zakańczania umieszczania tekstu obok grafiki (stosowany jest wtedy gdy do <img> użyto atrybutu align=”xxx”);
- parametr align=”xxx” użyty do znacznika <img> (xxx – right, left, center, top) służący do określania sposobu umieszczania yekstu względem grafiki.
2.5. Wstawianie tabeli.

Przykład 6.
W programie „Notatnik” utwórz dokument o nazwie „tabelka.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Tabelka</title>
</head>
<body bgcolor="teal">
<h2><center>Przykład tabeli</center></h2>

<table border="5" bordercolorlight="white" bordercolordark="brown" bgcolor="cyan" cellpadding="10" align="center" cellspacing="10">
<caption>Tabela 1</caption>
<tr>
<th width="10%" bgcolor="black">Nagłówek 1</th>
<th width="30%" colspan="2">Nagłówek 2</th>
<th width="30%">Nagłówek 3</th>
</tr>
<tr bgcolor="gray" height=100>
<td valign=top align=center>Dane 1</td>
<td bordercolor="red">Dane 2</td>
<td>Dane 3</td>
<td bordercolor="black" valign="bottom" align="right">Dane 4</td>
</tr>
<tr bgcolor="gray">
<td rowspan="2">Dane 5</td>
<td>Dane 6</td>
<td colspan="2">Dane 7</td>
</tr>
<tr bgcolor="gray" align="center">
<td bordercolor="blue">Dane 8</td>
<td>Dane 9</td>
<td>Dane 10</td>
</tr>
</table>
</body>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <table> – zdefiniowanie tabeli i parametry: border=”X” – grubość obramowania tabeli (X – wartość w pikselach, bordercolor=”nazwa_koloru” – kolor obramowania, bordercolorlight=”nazwa_koloru” – kolor obramowania lewego i górnego, bordercolordark=”nazwa_koloru” – kolor obramowania prawego i dolnego, cellspacing=”X” – grubość obramowania dla komórek tabeli innego niż domyślny (X – wartość w pikselach), cellpadding=”X” – odległość zawartości komórek od obramowania tzn. margines (X – wartość w pikselach);
- <caption> – podpis tabeli;
- <tr> – zdefiniowanie wiersza tabeli;
- <th> – zdefiniowanie komórek nagłówkowych tabeli (tekst automatycznie pogrubiony i wyśrodkowany);
- <td> – zdefiniowanie komórek w poszczególnych wierszach tabeli i parametry: rowspan=”X” – scalanie komórek (X – liczba scalonych komórek w pionie), colspan=”X” – scalanie komórek (X – liczba scalonych komórek w poziomie), valign=”xxx” – wyrównanie zawartości komórek w pionie (xxx – top, center, bottom), align=”xxx” – wyrównanie zawartości komórek w poziomie (xxx – left, center, right), width=”X” – szerokość komórki (X – wartość w pikselach lub w procentach szerokości okna).

Dodatkowo każdej komórce osobno można nadać kolor i styl ramki, tła, tekstu i marginesu. Wystarczy podanie odpowiednich parametrów i znaczników omówionych w poprzednich przykładach. Można również jako tła komórek lub komórki użyć pliku graficznego poprzez podanie parametru background=”nazwa_pliku_graficznego”.

2.6. Odsyłacze, hiperłącza, linki, sznurki itp.

Przykład 7.
Znajdź pliki o nazwach „earth3.jpg”, „onet.jpg”, „wp.gif”, „psk.gif” i „pkp.gif” i skopiuj je do katalogu, w którym zapisujesz tworzone dokumenty. W programie „Notatnik” utwórz dokument o nazwie „linki.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Odsyłacze</title>
</head>
<body background="earth3.jpg" link="green" alink="red" vlink="magenta">
<h2>
Idź do strony:
</h2><h3>
<ul type="circle">

<li><a href="strona1.htm" target="treść">Strona pierwsza</a>

<li>
<a href="linie.htm" target="treść">Linie rozdzielające</a>
<li>
<a href="listy.htm" target="treść">Punktowanie, numerowanie</a>
<li>
<a href="grafika_i_tekst.htm" target="treść">Grafika i tekst</a>
<li>
<a href="cytat.htm" target="treść">Cytaty, tekst oryginalny</a>
<li>
<a href="tabelka.htm" target="treść">Tabelka</a>
<li>
<a href="kot.htm" target="treść">Galeria kotów</a>

</ul>
</h3><h2>
Linki zewnętrzne:
</h2><h3>
<ul type="square">

<li><a href="http://www.onet.pl" target="okienko1">
<img src="onet.jpg" alt="www.onet.pl" width="80"></a>
<li><a href="http://www.wp.pl" target="okienko1">
<img src="wp.gif" alt="www.wp.pl" width="160"></a>
<li><a href="http://www.tu.kielce.pl" target="okienko1">
<img src="psk.gif" alt="www.tu.kielce.pl" width="60"></a>
<li><a href="http://www.pkp.pl" target="okienko1">
<img src="pkp.gif" alt="www.pkp.pl" width="70"></a>
</ul>
</body>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <a href=”nazwa_pliku”>nazwa odsyłacza</a> – tzw. odsyłacz bliski – powoduje przeniesienie do dokumentu w tym samym folderze lub na tym samym serwerze, na którym znajduje się tworzona przez nas strona (nazwa_pliku – mogą to być inne strony lub też wszelkiego rodzaju inne pliki – dokumenty *.htm, *.html, *.txt i graficzne zostaną wczytane w oknie przeglądarki, inne pliki zostaną uruchomione za pomocą skojarzonych z nimi programów bądź też zostaniemy zapytani czy ściągnąć i zapisać plik na dysku); dodanie parametru target=”xxx” spowoduje wyświetlenie pliku w nowym oknie przeglądarki lub w określonej ramce nazwanej również „xxx” – o ramkach za chwilę (xxx – nazwa nowego okienka lub ramki);
- <a href=”http://nazwa_strony_www>nazwa odsyłacza</a> – tzw. odsyłacz daleki – przeniesienie pod adres strony www znajdującej się na innym serwerze (można również tu dodać parametr target=”xxx”);
- <a href=”mailto:adres_poczty_e-mail”>nazwa odsyłacza<a> – odsyłacz daleki, dający możliwość wysłania poczty pod adres określony w odsyłaczu;
- <a href=”ftp://nazwa_serwera_ftp>nazwa odsyłacza</a> – odsyłacz daleki przenoszący do danych umieszczonych na serwerze [link widoczny dla zalogowanych]
- gdy po znaczniku <a ...> dodamy znacznik <img src=...> uzyskamy możliwość użycia np. pliku graficznego jako odsyłacza.

Przykład 8.
Znajdź pliki o nazwach „k1.jpg”, „k2.jpg”, „k3.jpg”, „k4.jpg”, „k5.jpg”, „k6.jpg”, „k7,jpg”, „k8.jpg”, „k9.jpg”, „k10.jpg”, „k11.jpg”, „k12.jpg”, „k13.jpg”, „k14.jpg”, „k15.jpg”, „k16.jpg”, „k17.jpg”, „k18.jpg” (dla ułatwienia: Start-->Wyszukaj-->Pliki lub foldery...-->Pliki i foldery-->k*.jpg), skopiuj je do katalogu, w którym zapisujesz tworzone dokumenty, a następnie znajdź pliki „txt.jpg”, „word.jpg” i „poczta.jpg”, „kot.txt” i „kot.doc” i również skopiuj je do folderu w którym wszystko zapisujesz. W programie „Notatnik” utwórz dokument o nazwie „kot.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Koty</title>
</head>
<body bgcolor="silver" text="red">
<h3>
<a href="#Dół strony">Dół strony</a>
</h3>
<center>
<hr width="90%" size="5" color="yellow">
<h1>Galeria kotów
<hr width="90%" size="5" color="green">
<img src="k1.jpg" width="25%" border=3>
<img src="k3.jpg" width="25%" border=5>
<img src="k2.jpg" width="25%" border=5>

<img src="k4.jpg" width="25%" border=5>
<img src="k6.jpg" width="25%" border=5>
<img src="k5.jpg" width="25%" border=5>

<img src="k7.jpg" width="25%" border=5>
<img src="k8.jpg" width="25%" border=5>
<img src="k9.jpg" width="25%" border=5>

<img src="k10.jpg" width="25%" border=5>
<img src="k11.jpg" width="25%" border=5>
<img src="k12.jpg" width="25%" border=5>

<img src="k13.jpg" width="25%" border=5>
<img src="k14.jpg" width="25%" border=5>
<img src="k15.jpg" width="25%" border=5>

<img src="k16.jpg" width="20%" border=5>
<img src="k18.jpg" width="20%" border=5>
<img src="k17.jpg" width="20%" border=5>

<hr width="90%" size="5" color="green">
</h1></center><h3>
Jeżeli chcesz se dowiedzieć co to za zwierzęlub podzielić się doświadczeniami, kliknij
poniżej:
<marquee behavior="alternate">
<a href="kot.txt"><img src="txt.jpg"> wersja *.txt</a>
</marquee>
<marquee behavior="scroll" direction="right">
<a href="kot.doc"><img src="word.jpg"> wersja *.doc</a>
</marquee>
<marquee behavior="slide">
<a href="mailto:cw_9_10@poczta.fm"><img src="poczta.jpg" width="30"> napisz</a>
</marquee>
<hr width="90%" size="5" color="blue">
<a href="#">Góra strony</a>
<a name="Dół strony"></a>
</h3>
</body>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <a name=”nazwa_miejsca_w_dokumencie”></a> – tzw. zakładka – oznaczenie miejsca w dokumencie, do którego będzie odnosił się odsyłacz <a href=”#nazwa_miejsca_w_dokumencie>nazwa miejsca</a>, zbudowanie takiej konstrukcji umożliwia przeniesienie się do określonego miejsca w dokumencie (podanie samego znaku „#” spowoduje przeniesienie na samą górę dokumentu), możliwe jest również przeniesienie do konkretnego miejsca w innym dokumencie HTML: <a href=”plik.htm#nazwa_miejsca_w_dokumencie>...</a>;
- <marquee> – prosta animacja części dokumentu (tekstu, grafiki), parametr behavior=”xxx” określa rodzaj animacji (xxx – alternate, scroll, slide), dodatkowo parametr direction="xxx” określa kierunek animacji (xxx – right, up, down, left – domyślnie).

2.7. Ramki.

Przykład 9.
Ramki są bardzo przydatnym narzędziem przy tworzeniu stron [link widoczny dla zalogowanych] Pozwalają na podzieleniu okna przeglądarki na kilka części i załadowaniu do nich kilku różnych dokumentów. W tym celu konieczne jest stworzenie specjalnej strony, na której podział ten zostanie określony.
W programie „Notatnik” utwórz dokument o nazwie „index.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Zajęcia 9 i 10 - Strona główna</title>
</head>
<frameset rows="10%,*" border="5" bordercolor="red">
<frame name="tytuł" SRC="nagłówek.htm" scrolling="no" noresize>
<frameset cols="20%,*">
<frame name="menu" SRC="linki.htm" scrolling="auto">
<frame name="treść" SRC="strona1.htm" scrolling="auto">
</frameset>
</frameset>
</html>

Nowe znaczniki użyte w powyższym przykładzie:
- <frameset>, </frameset> – podział strony ramkami, parametr rows=”X,*” lub cols=”X,*” określa rodzaj podziału (rows – podział na wiersze, X – rozmiar górnego wiersza w pikselach lub procentach, cols – podział na kolumny, X rozmiar lewej kolumny w pikselach lub procentach, * – zajęcie reszty wolnej przestrzeni, oczywiście dzielić można również na większą ilość części – należy wtedy podać odpowiednią liczbę wartości np.: rows=”20%, 20%,* spowoduje podzielenie na trzy wiersze itd.), podziału można dokonywać „wielostopniowo”, w powyższym przykładzie okienko zostało podzielone najpierw na dwa wiersze, a następnie dolny wiersz został podzielony na dwie kolumny, parametry border i bordercolor określają grubość i kolor ramek;
- <frame> – określa właściwości poszczególnych ramek – parametr name=”xxx” (xxx – nazwa ramki), src=”nazwa_dokumentu” – określa źródło dokumentu, który ma być załadowany do ramki, scrolling=”xxx” – określa właściwości paska przewijania dla danej ramki (xxx – yes - zawsze widoczny, no - zawsze niewidoczny, auto - widoczny w razie potrzeby), noresize – zablokowanie możliwości zmiany rozmiaru ramki.

Przykład 10.
W tym przykładzie zostanie utworzony prosty dokument, który pełnił będzie funkcję tytułu dla strony głównej („index,htm”).
Znajdź i skopiuj do folderu roboczego plik o nazwie „nag.jpg”. W programie „Notatnik” utwórz dokument o nazwie „nagłówek.htm”. Wprowadź poniższy tekst.

<html>
<head>
<title>Nagłówek</title>
</head>
<body background="nag.jpg" text="blue">
<h1>
<center>
Strona główna - ćwiczenie 9 i 10
</center>
</h1>
</body>
</html>

Zapisz wszystkie niezapisane dokumenty i pozamykaj wszystkie otwarte okienka z wyjątkiem folderu „Zaj_nr_9_10”. Kliknij dwukrotnie na ikonkę „index.htm” i podziwiaj końcowy wynik swojej pracy. Przetestuj wszystkie możliwości jakie daje Ci stworzona strona.

Źródła:
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych] pl/
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]
- [link widoczny dla zalogowanych]