Osadzanie elementów graficznych - Osadzanie elementów graficznych

Obrazy

Poza tekstem, na strony WWW możesz wstawić grafikę. Służy do tego znacznik <img> z atrybutem src, określającym nazwę pliku. Znacznik ten nie potrzebuje znacznika zamykającego. Wstawiana grafika powinna być zapisana w formacie GIF, JPG, PNG lub SVG (format stworzony do wykorzystania na stronach internetowych).
Przykładowo:

<img src="nazwa.png">

Grafika zostanie wyświetlona po lewej stronie względem otaczającego tekstu.

RA061Yj64d1qQ

Zrzut widoku strony dokumentu HTML z fotografią psa umieszczoną po lewej stronie względem otaczającego tekstu. — Zrzut ekranu przykładowej strony internetowej
Źródło: GroMar Sp. z o.o., Mróz Kamil, licencja: CC BY 3.0.

Istotne jest, aby znacznik <img> uzupełnić o atrybut alt, którego wartością jest tekst opisujący wstawioną grafikę. Będzie on przydatny wówczas, gdy przeglądarka nie będzie mogła odnaleźć źródła grafiki, np.

<img src="pies.png" alt="Pies">

Warto dodać także atrybut title, który będzie wyświetlany w momencie, gdy najedziemy kursorem myszy na grafikę, np.

<img src="pies.png" alt="pies" title="Pies Yoki">

Kolejne atrybuty pozwalają na określenie wysokości (height) i szerokości (width) wczytywanej grafiki, np.

<img src="pies.png" alt="Pies" title="Pies Yoki" width="188"
height="220">

Nie należy używać tej możliwości jako podstawowego sposobu zmiany rozmiaru grafiki. Na stronie powinna być umieszczana grafika wcześniej przygotowana (skalowana) w programie graficznym.

Ponieważ znacznik <img> tworzy element wierszowy (liniowy), można umieścić kilka grafik obok siebie, w jednym wierszu. Ponadto w HTML5 istnieje znacznik <figure>, umożliwiający utworzenie kontenera (pojemnika) dla grupy grafik, które mogą otrzymać wspólny podpis definiowany za pomocą znacznika <figcaption>. Powinien on znajdować się wewnątrz znacznika <figure>, np.

<figure>  
<img src="zdjecie1.jpg" alt="Dalia"/>  
<img src="zdjecie2.jpg" alt="Owoce"/>  
<img src="zdjecie3.jpg" alt="Aster kremowy"/>  
<img src="zdjecie4.jpg" alt="Astry niebieskie"/>  
<figcaption>Zdjęcia --- Kwiaty jesienne</figcaption>  
</figure>

RhQWlZwRjiL1F

Ilustracja przedstawia cztery fotografie na których znajdują się kwiaty polskie. Na pierwszym zdjęciu widać fioletową różę. Na drugim zdjęciu widoczne są kwiaty jabłoni obok których rosną jabłka. Na trzecim zdjęciu widać kwiatek z żółto - pomarańczowymi pączkami. Pączki mają cylindryczny kształt. Na czwartym zdjęciu znajdują się fioletowe kwiatki rosnące na łące. Pod zdjęciami znajduje się źródło strony: zdjęcie kwiaty jesienne. — Widok strony ze wstawionymi fotografiami
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

R1A9409QymAwC

Wstawianie grafiki w HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Zapamiętaj!

Przy kilku plikach graficznych na stronie utwórz na nie osobny podfolder (nazwany np. ilustracje) i twórz odwołania do pliku, poprzedzając w kodzie jego nazwę ścieżką dostępu, np.

<img src="ilustracje/nazwa.gif"/>

Ćwiczenie 1

Korzystając ze znacznika <img> oraz jego atrybutów, umieść na tworzonej przez ciebie stronie zdjęcie (JPG) lub rysunek (GIF). Pamiętaj, aby plik z grafiką znajdował się w twoim folderze, a jego nazwa nie zawierała polskich znaków oraz dużych liter.

Przykładowa ilustracja powinna w podobny sposób znajdować się na twojej stronie:

R9oGujHtu5Gla

Ilustracja przedstawia widok tworzonej strony internetowej w przeglądarce Microsoft Edge ze wstawionym zdjęciem.W górnej części przeglądarki na karcie zakładki znajduje się tytuł: Moja pierwsza strona. Poniżej na pasku adresu widoczny jest adres strony. Pod paskiem adresu znajduje się strona internetowa. Na górze strony znajduje się nagłówek pierwszego poziomu z tekstem: Światowe dzieła sztuki. Poniżej widać napis: Dzieła sztuki antycznej sporządzony nagłówkiem drugiego poziomu. Poniżej znajduje się akapit tekstowy z zastosowanymi znacznikami preformatowania, line break oraz mark. Teks: klasyczny oświeceniowy, klasyczny renesansowy oraz neoklasyczny jest zaznaczony na żółto. Na dole akapitu znajduje się tabela zatytułowana wielcy rzeźbiarze greccy. Lp.TwórcaLata działalnościPrzykładowe dzieło1Fidiasz<math aria‑label="od czterysta dziewięćdziesiątego do czterysta trzydziestego przed naszą erą">490 - 430 p.n.eZeus Olimpijski2Lizyp<math aria‑label="od trzysta siedemdziesiątego do trzysta dwudziestego przed naszą erą">370 - 320 p.n.eHermes odpoczywający3Praksyteles<math aria‑label="od trzysta osiemdziesiątego do trzysta trzydziestego przed naszą erą">380 - 330 p.n.eAfrodyta Knidyjska Poniżej tabeli wstawione jest zdjęcie. Na zdjęciu widoczny jest posąg Zeusa siedzący na tronie.Pod akapitem znajduje się pięć kolejnych nagłówków drugiego poziomu. Nagłówki w kolejności: dzieła sztuki renesansu, dzieła sztuki współczesnej, dzieła sztuki literackiej, dzieła sztuki malarskiej, dzieła sztuki muzycznej. Poniżej tekstu nagłówka: Dzieła sztuki malarskiej umieszczony jest cytat. Cytat brzmi: Nie zrozumiecie sztuki, póki nie zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z wyjątkiem 2. Tekst jest napisany kursywą i podkreślony. — Widok strony internetowej ze wstawionym zdjęciem
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, ponownie musisz edytować plik index.html w jednym z edytorów tekstowych. Następnie po dodanej w poprzednim zadaniu tabeli dopisać linijki kodu:

<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />

Żeby zdjęcie poprawnie wyświetliło się na twojej stronie internetowej należy umieścić plik zeus.jpg w tym samym folderze co plik index.html. Pobierz poniższą ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku, zmień nazwę pliku na zeus.jpg i umieść go w folderze z twoim nazwiskiem.

RUYDBToWZW31Q

Załącznik zawiera grafikę Zeusa.

Załącznik zawiera grafikę Zeusa.

Źródło: Antoine-Chrysostome Quatremère de Quincy, domena publiczna.

Plik JPG o rozmiarze 209.14 KB w języku polskim

W załączniku poniżej znajduje się archiwum .zip z dwoma plikami - index.html oraz zeus.jpg. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik index zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona o sztuce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 16. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów width znak równości cudzysłów 180 cudzysłów height znak równości cudzysłów 220 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 42. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 43. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>

<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>

<br/>
<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
<br/>

<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

RVcH3hbTRj9Ey

Załącznik zawiera archiwum zip z plikami strony internetowej

Załącznik zawiera archiwum zip z plikami strony internetowej

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik ZIP o rozmiarze 210.40 KB w języku polskim

Odnośniki

Jak już zapewne wiesz, odnośniki (hiperłącza) to odsyłacze do innych stron internetowych. Połączenia definiowane są za pomocą znacznika rozpoczynającego <a> oraz kończącego </a>, wewnątrz których zawarte są informacje określające hiperłącza.

Etykieta określająca połączenie do przykładowego adresu w Internecie ma postać

<a href="http://www.zpe.gov.pl">Platforma Edukacyjna</a>

gdzie:

<a> - etykieta otwierająca;
href="http://www.zpe.gov.pl" - atrybut z docelowym adresem hiperłącza, czyli miejsce gdzie przekieruje cię link po kliknięciu w atrybut;
Platforma Edukacyjna - treść odnośnika na stronie internetowej, która przeniesie na wskazany adres;
</a> - etykieta zamykająca.

R1XpPbRbfIVVy

Ilustracja przedstawiająca strukturę etykiety określającej połączenie do dowolnego adresu w Internecie. kurs html. Href jest atrybutem, strona podana w linku - adresem URL, a "kurs html" jest tekstem linka. — Przykładowy link z wyodrębnieniem elementów jego struktury
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Odnośniki <a> mogą posiadać atrybut target, którego wartość _blank mówi, że odnośnik otworzy się w nowym oknie, a wartość _self, że odnośnik otworzy się w tym samym oknie.

Istnieją dwa rodzaje hiperpołączeń:

relatywne, opisujące połączenie z plikiem znajdującym się w tym samym folderze, co dokument zawierający hiperpołączenie, np.

<a href="inform.html">Wiadomości</a>,

gdzie:

- inform.html jest połączeniem z plikiem o podanej nazwie, znajdującym się w tym samym katalogu co plik index.html. Połączeń relatywnych powinno się używać łącząc dokumenty, które zostały stworzone własnoręcznie, gdyż to twórca określa miejsce, gdzie są one przechowywane.
absolutne, zawierające pełny adres miejsca docelowego, np.

<a href="https://www.gov.pl">Strona rządowa</a>

Hiperpołączenia do innych miejsc w sieci można również tworzyć z wykorzystaniem grafik. Polega to na umieszczeniu znacznika <img> wewnątrz znacznika hiperpołączenia <a>, np.

<a href="koty.html"><img src="kot.gif" alt="Kot"></a>

Po naciśnięciu obrazka przeniesiesz się na stronę koty.html.

Możesz również umieścić na stronie WWW ikonę grafiki, po wybraniu której ukaże się jej pełnowymiarowa wersja. Za pomocą omówionego już parametru target możesz określić okno przeglądarki, w którym ma się pojawić większa ilustracja.
Przykładowo, jeżeli chcesz otworzyć grafikę z podfolderu ilustracje w nowym oknie, przypisz atrybutowi target wartość _blank.

<a href="ilustracje/duza_grafika.gif" target="_blank">
<img src="ilustracje/mala_grafika.gif" alt="Mała grafika"/></a>

Uwaga!

Grafiki – mała i duża – powinny znajdować się w tym samym folderze.

RCQGbBgiQgzE0

Odsyłacze w kodzie HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 2

Na tworzonej przez siebie stronie internetowej dodaj odnośnik do fotografii. Po kliknięciu w fotografię, wstawioną przez ciebie w poprzednim zadaniu, w nowej karcie powinno otworzyć się to samo zdjęcie w większym formacie.

W załączniku poniżej znajduje się archiwum zip z dwoma plikami - index.html oraz zeus.jpg. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik index zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona o sztuce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 16. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny a href znak równości cudzysłów zeus kropka jpg cudzysłów target znak równości cudzysłów podkreślnik blank cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów title znak równości cudzysłów Kliknij przecinek aby zobaczyć powiększenie cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów width znak równości cudzysłów 180 cudzysłów height znak równości cudzysłów 220 cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 42. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 43. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>

<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>

<br/>
<a href="zeus.jpg" target="_blank"><img src="zeus.jpg" title="Kliknij, aby zobaczyć powiększenie" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>

<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

RgZWMln4p8qzV

Załącznik zawiera archiwum zip z plikami strony internetowej.

Załącznik zawiera archiwum zip z plikami strony internetowej

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik ZIP o rozmiarze 210.45 KB w języku polskim

Mapy odnośników na obrazach

W kodzie HTML istnieje także możliwość utworzenia mapy odnośników, dzięki której różne obszary jednej grafiki mogą prowadzić do wielu miejsc w sieci. W celu przekazania przeglądarce informacji na temat wybranego obszaru grafiki, niezbędna będzie znajomość współrzędnych ograniczających go punktów. W tym celu możesz skorzystać z programu umożliwiającego czytanie tego typu danych, na przykład z programu Paint.

Jeżeli wiesz, w którym miejscu chcesz wstawić odsyłacz oraz jaki ma on posiadać kształt, musisz zdefiniować następujące polecenie:

<img src="adres_obrazu.gif" usemap="#nazwa mapy"
alt="opis_alternatywny"/>

Polecenie img src="adres_obrazu.gif" przywołuje wskazaną grafikę.
Umieszczając atrybut usemap z wartością #nazwa mapy, podasz przeglądarce informację, że elementy grafiki obraz.gif są przygotowywane do pełnienia roli odnośników, a przygotowywana do tego celu mapa nosi nazwę #nazwa_mapy.
Poleceniem <map> rozszerzonym o atrybut name zdefiniujemy mapę. Wartość tego atrybutu musi być taka sama, jak wartość parametru usemap, z pominięciem znaku #, np.

<map name="nazwa_mapy">

Kolejnym krokiem będzie wprowadzenie fragmentów mapy, odpowiadających poszczególnym aktywnym jej obszarom. W tym celu wprowadź nieparzysty znacznik <area>, zawierający następujące atrybuty:

shape (kształt) - zawiera informacje o kształcie danego obszaru przyjmujące jedną z następujących wartości: rect – prostokąt, circle – okrąg, poly – wielokąt;
coords (współrzędne) - określa oddzielane przecinkami współrzędne punktów ograniczających obszar aktywny. W przypadku prostokąta dwie pierwsze liczby podają współrzędne lewego górnego rogu, a następne dwie – prawego dolnego, np.

<area shape="rect" coords="15,5,70,60"/>

W przypadku okręgu pierwsze dwie liczby informują o położeniu środka okręgu, a ostatnia o długości promienia. W przypadku obszaru nieregularnego musisz zdefiniować wszystkie jego wierzchołki.

href (odsyłacz) - określa adres URL, do którego odsyła dany fragment mapy.

Przykładowo:

<img src="polska.gif" border="0" usemap="#kraj" />

<map name="kraj">
<area href="lublin.html" shape="rect" coords="350,21,371,270" alt="Województwo lubelskie"/>
<area href="poznan.html" shape="poly" coords="228,215,369,215,420,411,160,412" alt="Województwo wielkopolskie/>
<area href="lodz.html" shape="circle" coords="733,873,485" alt="Województwo łódzkie"/>
</map>

ROB0pExX40aye

Podział ilustracji na fragmenty
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 3

W tym samym folderze w którym znajduje się plik index.html utwórz drugi plik o nazwie mapa z rozszerzeniem .html i edytuj jego zawartość tworząc podstawową strukturę dokumentu HTML z ćwiczenia 4. Do swojej strony index.html dodaj relatywne połącznie hipertekstowe prowadzące do nowoutworzonego pliku mapa.html podobnie jak w ćwiczeniu 13. Pamiętaj, aby z nowej podstrony dało się również wrócić do strony głównej. Następnie, na nowej stronie umieść fotografię stosowną do tematu jaki prezentujesz (w taki sam sposób jak w ćwiczeniu 12). Do fotografii w pliku mapa.html dodaj mapę odnośników kierującą na inne strony internetowe istniejące już w sieci o podobnej tematyce.

Przykładowa nowa strona powinna wyglądać w ten sposób:

R1Fuk7DmrqQAI

Wstawiona fotografia posiada niewidoczne pola. Gdy klikniesz w jedno z nich, działanie odnośnika przeniesie cię na jedną z trzech stron:

R1NdSh2hauFHa

Ilustracja pokazuje układ niewidocznych pól znajdujących się na zdjęciu Zeusa.W centralnej części zdjęcia widoczny jest kształt strzałki. Grot strzałki skierowany jest do dołu. W grot strzałki wpisany jest zielony okrąg. W okręgu znajduje się napis: Fidiasz, cyfrowe koordynaty przypisane do zmiennej coords oraz kształt circle przypisany do zmiennej shape. Podstawa strzałki ma kształt niebieskiego prostokąta. W prostokącie znajduje się napis: Zeus, cyfrowe koordynaty przypisane do zmiennej coords oraz kształt rect przypisany do zmiennej shape. Pozostałe prostokątne obszary powstałe pomiędzy bokami podstawy strzałki a bokami zdjęcia, oraz trójkątne obszary powstałe poniżej grotu strzałki są opisane słowem: Świątynia. Obszary mają indywidualne cyfrowe koordynaty oraz przypisany kształt rect lub poly do zmiennej shape. — Układ niewidocznych pól na zdjęciu
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz utworzyć nowy plik mapa.html i edytować jego zawartość w edytorze tekstowym dodając podstawową strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Zeus z Olimpii" />
</head> 
<body>  

</body> 
</html>

Następnie w sekcji body wstaw zdjęcie z odpowiednimi atrybutami (w tym nazwą usemap):

<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">

Mapa odnośników na fotografii zadziałała kiedy w sekcji body dodasz znacznik map oraz współrzędne odpowiadające konkretnym miejscom na fotografii:

Linia 1. otwórz nawias ostrokątny map name znak równości cudzysłów starozytnosc cudzysłów zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Posąg Zeusa w Olimpii cudzysłów title znak równości cudzysłów Zeus cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Posąg podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 165 przecinek 565 przecinek 561 przecinek 5 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 0 przecinek 662 przecinek 161 przecinek 0 przecinek 157 przecinek 10 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 564 przecinek 650 przecinek 681 przecinek 0 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Fidiasz cudzysłów title znak równości cudzysłów Fidiasz cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Fidiasz cudzysłów coords znak równości cudzysłów 342 przecinek 708 przecinek 141 cudzysłów shape znak równości cudzysłów circle cudzysłów zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 314 przecinek 860 przecinek 9 przecinek 668 przecinek 4 przecinek 857 przecinek 156 przecinek 857 przecinek 239 przecinek 859 cudzysłów shape znak równości cudzysłów poly cudzysłów zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 675 przecinek 854 przecinek 380 przecinek 856 przecinek 676 przecinek 660 przecinek 677 przecinek 778 przecinek 677 przecinek 808 cudzysłów shape znak równości cudzysłów poly cudzysłów zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny prawy ukośnik map zamknij nawias ostrokątny.

<map name="starozytnosc">
    <area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii"  coords="0,662,161,0,157,10" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
    <area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>

Aby móc wrócić do strony głównej znajdującej się w pliku index.html, na dole sekcji <body> w pliku mapa.html należy dodać następujące linijki kodu:

<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>

W pliku index.html edytuj linijkę z odnośnikiem, który po kliknięciu zamieszczonego na stronie obrazu wyświetlał w osobnej karcie większy obraz Zeusa. Zmień wartość atrybutu href z wpisanego wcześniej zeus.jpg na mapa.html:

<a href="mapa.html" target="_blank">
<img src="zeus.jpg" alt="Zeus Olimpijski" width="180" height="220" />
</a>

Pamiętaj, aby wszystkie pliki znajdowały się w tym samym folderze. Od teraz, po kliknięciu na obraz Zeusa z Olimpii działanie odnośnika przeniesie cię na stronę utworzoną w pliku mapa.html.

Aby zdjęcie poprawnie wyświetliło się na twojej stronie internetowej należy umieścić plik zeus.jpg w tym samym folderze co plik mapa.html. Pobierz poniższą ilustrację wyobrażenia posągu Zeusa w Olimpii z 1815 roku, zmień nazwę pliku na zeus.jpg i umieść go w folderze z twoim nazwiskiem.

RUYDBToWZW31Q

Załącznik zawiera grafikę Zeusa.

Załącznik zawiera grafikę Zeusa.

Źródło: Antoine-Chrysostome Quatremère de Quincy, domena publiczna.

Plik JPG o rozmiarze 209.14 KB w języku polskim

W załączniku poniżej znajduje się archiwum zip z trzema plikami - index.html, mapa.html oraz zeus.jpg. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik index zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona o sztuce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 16. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny a href znak równości cudzysłów mapa kropka html cudzysłów target znak równości cudzysłów podkreślnik blank cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów title znak równości cudzysłów Kliknij przecinek aby przejść do mapa kropka html cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów width znak równości cudzysłów 180 cudzysłów height znak równości cudzysłów 220 cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 42. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 43. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>

<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>

<br/>
<a href="mapa.html" target="_blank"><img src="zeus.jpg" title="Kliknij, aby przejść do mapa.html" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>

<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

Plik mapa zawiera strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Zeus z Olimpii" />
</head> 
<body>  

<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">

<map name="starozytnosc">
    <area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii"  coords="0,662,161,0,157,10" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
    <area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>

<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>

</body> 
</html>

R1BPLTc6jlaar

Załącznik zawiera archiwum zip z plikami strony internetowej.

Załącznik zawiera archiwum zip z plikami strony internetowej

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik ZIP o rozmiarze 211.11 KB w języku polskim

Multimedia

Jedną z przyczyn popularności sieci internet jest możliwość publikowania na stronach WWW dźwięków i klipów video. Aby przeglądaniu zawartości stron towarzyszył podkład muzyczny, należy użyć, wprowadzonego w HTML5, znacznika <audio> wraz z atrybutami <audio atrybuty> np.:

<audio src="audio.mp3" type="audio/mpeg" controls autoplay></audio>

src – URL wskazuje źródło (plik multimedialny);
type – typ MIME (ang. Multipurpose Internet Mail Extensions), mówi o rodzaju danych przesyłanych drogą elektroniczną, przykładowo audio/mpeg dla MP3 lub audio/x ms wma dla WMA;
controls – umożliwia sterowanie odtwarzanym utworem,
autoplay – informuje, że odtwarzanie rozpocznie się automatycznie.

Pliki audio mogą być również wykorzystywane jako uzupełnienie informacji tekstowych prezentowanych na stronie. Za pomocą polecenia <a> i atrybutu href możesz utworzyć połączenie pomiędzy fragmentem tekstu (grafiki) i plikiem audio, np.:

<a href="plik_audio.mp3"><img src="nutka.gif" alt="Wesołe nutki"/>
Przeboje minionego roku</a>

W podobny sposób można utworzyć połączenie tekstu (grafiki) z plikiem video.

RP58q6lcnAzZn

Wstawianie plików audio i wideo w HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 4

Znajdź spokojną muzykę lub urywek audiobooka (możesz go nagrać samodzielnie lub wyszukać w Internecie) pasujący tematycznie do tworzonej przez ciebie witryny internetowej, a następnie dodaj go na swojej stronie, tak aby odtwarzał się automatycznie i zapętlony. Muzykę możesz dodać do utworzonego pliku mapa.html, aby umilić użytkownikom czas podczas przeglądania stron zawartych na mapie odnośników.

Ciekawe źródła z muzyką znajdziesz na http://otwartezasoby.pl/category/muzyka/.

Po wykonaniu tego zadania, wszystkie elementy wyświetlone na twojej stronie internetowej powinny prezentować się następująco:

R1BJO1ABy0vkG

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz edytować plik mapa.html w jednym z edytorów tekstowych. Następnie pod wstawioną fotografią dopisać linijki kodu:

<audio controls loop autoplay src="audio.mp3" type="audio/mpeg">Plik dźwiękowy nieobsługiwany</audio>

Przykładowy plik audio Greek Tragedy autorstwa Various Artists La bel, wstawiony na tworzoną przez nas stronę możesz pobrać poniżej:

R11K3Su5TPeWc

Załącznik zawiera ścieżkę dźwiękową.

Załącznik zawiera ścieżkę dźwiękową

Źródło: Various Artists La bel, GroMar, licencja: CC BY 3.0.

Plik MP3 o rozmiarze 13.06 MB w języku polskim

W załączniku poniżej znajduje się archiwum .zip z czterema plikami - index.html, mapa.html, zeus.jpg oraz audio.mp3. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik audio zawiera muzykę Greek Tragedy autorstwa Various Artists La bel. Plik index zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona o sztuce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 16. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 33. otwórz nawias ostrokątny a href znak równości cudzysłów mapa kropka html cudzysłów target znak równości cudzysłów podkreślnik blank cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów title znak równości cudzysłów Kliknij przecinek aby przejść do mapa kropka html cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów width znak równości cudzysłów 180 cudzysłów height znak równości cudzysłów 220 cudzysłów prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 42. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 43. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>

<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>

<br/>
<a href="mapa.html" target="_blank"><img src="zeus.jpg" title="Kliknij, aby przejść do mapa.html" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>

<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

Plik mapa zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Mapa otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Zeus z Olimpii cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny img src znak równości cudzysłów zeus kropka jpg cudzysłów title znak równości cudzysłów Zeus cudzysłów alt znak równości cudzysłów Zeus Olimpijski cudzysłów prawy ukośnik usemap znak równości cudzysłów kratka starozytnosc cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny audio controls loop autoplay src znak równości cudzysłów audio kropka mp3 cudzysłów type znak równości cudzysłów audio prawy ukośnik mpeg cudzysłów zamknij nawias ostrokątny Plik dźwiękowy nieobsługiwany otwórz nawias ostrokątny prawy ukośnik audio zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny map name znak równości cudzysłów starozytnosc cudzysłów zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Posąg Zeusa w Olimpii cudzysłów title znak równości cudzysłów Zeus cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Posąg podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 165 przecinek 565 przecinek 561 przecinek 5 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 0 przecinek 662 przecinek 161 przecinek 0 przecinek 157 przecinek 10 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 564 przecinek 650 przecinek 681 przecinek 0 cudzysłów shape znak równości cudzysłów rect cudzysłów zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Fidiasz cudzysłów title znak równości cudzysłów Fidiasz cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Fidiasz cudzysłów coords znak równości cudzysłów 342 przecinek 708 przecinek 141 cudzysłów shape znak równości cudzysłów circle cudzysłów zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 314 przecinek 860 przecinek 9 przecinek 668 przecinek 4 przecinek 857 przecinek 156 przecinek 857 przecinek 239 przecinek 859 cudzysłów shape znak równości cudzysłów poly cudzysłów zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny area target znak równości cudzysłów podkreślnik blank cudzysłów alt znak równości cudzysłów Świątynia Zeusa w Olimpii cudzysłów title znak równości cudzysłów Świątynia cudzysłów href znak równości cudzysłów https dwukropek prawy ukośnik prawy ukośnik pl kropka wikipedia kropka org prawy ukośnik wiki prawy ukośnik Świątynia podkreślnik Zeusa podkreślnik w podkreślnik Olimpii cudzysłów coords znak równości cudzysłów 675 przecinek 854 przecinek 380 przecinek 856 przecinek 676 przecinek 660 przecinek 677 przecinek 778 przecinek 677 przecinek 808 cudzysłów shape znak równości cudzysłów poly cudzysłów zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny prawy ukośnik map zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny a href znak równości cudzysłów index kropka html cudzysłów zamknij nawias ostrokątny otwórz nawias ostrokątny h1 zamknij nawias ostrokątny Wróć do strony głównej otwórz nawias ostrokątny prawy ukośnik h1 zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik a zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Zeus z Olimpii" />
</head> 
<body>  

<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">

<audio controls loop autoplay src="audio.mp3" type="audio/mpeg">Plik dźwiękowy nieobsługiwany</audio>

<map name="starozytnosc">
    <area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii"  coords="0,662,161,0,157,10" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
    <area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>

<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>

</body> 
</html>

R1E6wkkmTUcfp

Załącznik zawiera archiwum zip z plikami strony internetowej.

Załącznik zawiera archiwum zip z plikami strony internetowej

Źródło: GroMar Sp. z o.o., Various Artists La bel, licencja: CC BY 3.0.

Plik ZIP o rozmiarze 12.33 MB w języku polskim

Ramki zagnieżdżone

W HTML5 zostały wprowadzone, tzw. ramki zagnieżdżone. Strony HTML mogą zawierać nie tylko odnośniki do innych stron, ale także zagnieżdżać inne, co oznacza, że jakaś strona pojawi się jako fragment strony zewnętrznej. Żeby zagnieździć stronę, należy skorzystać ze znacznika <iframe>:

<iframe src="plik.html"></iframe>

Trzy najważniejsze atrybuty, jakie mogą wystąpić w elemencie iframe to:

src – wartość adresu URL dokumentu do wstawienia,
width – szerokość iframe w pikselach,
height – wysokość iframe w pikselach.

Mechanizm ten jest wykorzystywany przez różne serwisy do udostępniania dodatków do stron. Przykładowo, aby wstawić na stronę film z serwisu YouTube przedstawiający informacje o e‑podręczniku, trzeba napisać:

<iframe width="560" height="315"
src="https://www.youtube.com/watch?v=sI9hk3JwbhQ">
</iframe>

Znacznik <iframe> umożliwia między innymi:

dodawanie filmów z zewnętrznych serwisów,
zagnieżdżanie gotowych komentarzy,
umieszczanie reklam,
cytowanie innych stron,
dodawanie przycisków sieci społecznościowych.

Znacznik <iframe> możesz wykorzystać również do otwierania się wewnątrz ramki zagnieżdżonej odnośników. Aby to zrobić znacznikowi początkowemu dodaj nazwę, korzystając z atrybutu name:

<iframe name="okienko"></iframe>

a następnie odnośnik, który otwiera stronę zmodyfikuj dodając mu w atrybucie target nazwę ramki, w której powinien się otworzyć.
Przykładowo:

<p>  
<a href="https://zpe.gov.pl" target="okienko">
Epodręcznik dla młodzieży</a>  
</p>

Przypomnij sobie, że wcześniej element, do którego kierował odnośnik, mógł się otwierać w tym samym lub nowym oknie. Obecnie może otworzyć się wewnątrz ramki, a taka strona będzie w pełni funkcjonalna - działają na niej odnośniki i skrypty.
Przykładowo:

RFx6apkwRW5NP

Ramki zagnieżdżone w kodzie HTML
Źródło: Sławomir Szaruga, licencja: CC BY 3.0.

Ćwiczenie 5

Wykorzystując podane informacje, umieść na jednej ze stron ramkę pływającą, zawierającą inną ze stron twojego serwisu. Może to być strona utworzona w pliku mapa.html.

Po wykonaniu tego zadania twoja strona interentowa powinna wyglądać w podobny sposób:

R1KWQmzw7g3f6

Aby uzyskać efekt pokazany na powyższym zrzucie okna przeglądarki, musisz edytować plik index.html dodając w sekcji body:

<iframe width="100%" height="900px"
src="mapa.html">
</iframe>

oraz usunąć niepotrzebny już wcześniej wstawiony obraz Zeusa kasując następujące linijki kodu:

<br/>
<a href="mapa.html" target="_blank"><img src="zeus.jpg" title="Kliknij, aby przejść do mapa.html" alt="Zeus Olimpijski" width="180" height="220" /></a>
<br/>

Nie ma już również potrzeby, aby z podstrony Mapa, dało się wrócić do strony głównej, dlatego z pliku mapa.html usuń linijkę odnośnika:

<a href="index.html"> <h1>Wróć do strony głównej </h1> </a>

W załączniku poniżej znajduje się archiwum .zip z czterema plikami - index.html, mapa.html, zeus.jpg oraz audio.mp3. Ilustracja „zeus” przedstawia wyobrażenie posągu Zeusa w Olimpii z 1815 roku. Plik audio zawiera muzykę Greek Tragedy autorstwa Various Artists La bel. Plik index zawiera strukturę dokumentu HTML:

Linia 1. otwórz nawias ostrokątny wykrzyknik DOCTYPE html zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny html zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny head zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny title zamknij nawias ostrokątny Moja pierwsza strona otwórz nawias ostrokątny prawy ukośnik title zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny charset znak równości cudzysłów utf minus 8 cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny meta name znak równości cudzysłów author cudzysłów content znak równości cudzysłów Kowalski cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 7. otwórz nawias ostrokątny meta name znak równości cudzysłów keywords cudzysłów content znak równości cudzysłów sztuka przecinek malarstwo cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny name znak równości cudzysłów description cudzysłów content znak równości cudzysłów Strona o sztuce cudzysłów prawy ukośnik zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny prawy ukośnik head zamknij nawias ostrokątny. Linia 10. otwórz nawias ostrokątny body zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny ul zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny Światowe dzieła sztuki otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny ol type znak równości cudzysłów a cudzysłów zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki antycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny p zamknij nawias ostrokątny Do tego okresu zaliczamy dzieła powstałe od XII wieku p kropka n kropka e kropka do III wieku p kropka n kropka e kropka W wieku Ill p kropka n kropka e kropka pod względem artystycznym zaczął przewodzić Rzym kropka Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce kropka otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny Mamy na myśli otwórz nawias ostrokątny mark zamknij nawias ostrokątny klasycyzm oświeceniowy przecinek klasycyzm renesansowy otwórz nawias ostrokątny prawy ukośnik mark zamknij nawias ostrokątny oraz neoklasycyzm kropka. Linia 16. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny otwórz nawias ostrokątny p zamknij nawias ostrokątny Podstawą sztuki klasycznej jest harmonia przecinek równowaga przecinek logika przecinek spokój i piękno kropka Nie przedstawiono w sztuce klasycznej wartości negatywnych przecinek takich jak starość czy cierpienie kropka W przypadku postaci ludzkich istotna była właściwa harmonia i prostota otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny table border znak równości cudzysłów 1 cudzysłów zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny caption zamknij nawias ostrokątny Wielcy rzeźbiarze greccy otwórz nawias ostrokątny prawy ukośnik caption zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 21. otwórz nawias ostrokątny th zamknij nawias ostrokątny Lp kropka otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Twórca otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Lata działalności otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny otwórz nawias ostrokątny th zamknij nawias ostrokątny Przykladowe dzieła otwórz nawias ostrokątny prawy ukośnik th zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny td zamknij nawias ostrokątny 1 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Fidiasz otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 490 minus 430 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Zeus Olimpijski otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny td zamknij nawias ostrokątny 2 kropka otwórz nawias ostrokątny prawy ukośnik tfd zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Lizyp otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 370 minus 320 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Hermes odpoczywający otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny tr zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny td zamknij nawias ostrokątny 3 kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Praksyteles otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny 380 minus 330 p kropka n kropka e kropka otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny otwórz nawias ostrokątny td zamknij nawias ostrokątny Afrodyta Knidyjska otwórz nawias ostrokątny prawy ukośnik td zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny prawy ukośnik tr zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik table zamknij nawias ostrokątny. Linia 32. otwórz nawias ostrokątny iframe width znak równości cudzysłów 100 procent cudzysłów height znak równości cudzysłów 900px cudzysłów zamknij nawias ostrokątny. Linia 33. src znak równości cudzysłów mapa kropka html cudzysłów zamknij nawias ostrokątny. Linia 34. otwórz nawias ostrokątny prawy ukośnik iframe zamknij nawias ostrokątny. Linia 36. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki renesansu otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki współczesnej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki literackiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny hr prawy ukośnik zamknij nawias ostrokątny. Linia 40. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki malarskiej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 41. otwórz nawias ostrokątny blockquote zamknij nawias ostrokątny otwórz nawias ostrokątny b zamknij nawias ostrokątny otwórz nawias ostrokątny u zamknij nawias ostrokątny otwórz nawias ostrokątny i zamknij nawias ostrokątny Nie zrozumiecie sztuki przecinek póki nie. Linia 42. zrozumiecie przecinek że w sztuce 1 plus 1 może dać każdą liczbę z. Linia 43. wyjątkiem 2 kropka otwórz nawias ostrokątny prawy ukośnik i zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik u zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik b zamknij nawias ostrokątny otwórz nawias ostrokątny prawy ukośnik blockquote zamknij nawias ostrokątny. Linia 44. otwórz nawias ostrokątny li zamknij nawias ostrokątny Dzieła sztuki muzycznej otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 45. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 46. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 47. otwórz nawias ostrokątny prawy ukośnik body zamknij nawias ostrokątny. Linia 48. otwórz nawias ostrokątny prawy ukośnik html zamknij nawias ostrokątny.

<!DOCTYPE html>
<html> 
<head>
<title>Moja pierwsza strona</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Strona o sztuce" />
</head> 
<body> 
<ul>
<li>Światowe dzieła sztuki</li> 
<ol type="a">
<li>Dzieła sztuki antycznej</li> 
<p>Do tego okresu zaliczamy dzieła powstałe od XII wieku p.n.e. do III wieku p.n.e. W wieku Ill p.n.e. pod względem artystycznym zaczął przewodzić Rzym. Przez wiele stuleci cywilizacja europejska wzorowała swoje dzieła na dokonaniach antyku i kładła nacisk na przestrzeganie antycznych zasad i norm w sztuce.<br />Mamy na myśli <mark> klasycyzm oświeceniowy, klasycyzm renesansowy </mark> oraz neoklasycyzm.
</p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Podstawą sztuki klasycznej jest harmonia, równowaga, logika, spokój i piękno. Nie przedstawiono w sztuce klasycznej wartości negatywnych, takich jak starość czy cierpienie. W przypadku postaci ludzkich istotna była właściwa harmonia i prostota</p>

<table border="1">
<caption>Wielcy rzeźbiarze greccy</caption>
<tr>
<th>Lp.</th><th>Twórca</th><th>Lata działalności</th><th>Przykladowe dzieła</th>
</tr>
<td>1.</tfd><td>Fidiasz</td><td>490-430 p.n.e.</td><td>Zeus Olimpijski</td>
</tr>
<tr>
<td>2.</tfd><td>Lizyp</td><td>370-320 p.n.e.</td><td>Hermes odpoczywający</td>
<tr>
<td>3.</td><td>Praksyteles</td><td>380-330 p.n.e.</td><td>Afrodyta Knidyjska</td>
</tr>
</table>

<iframe width="100%" height="900px">
src="mapa.html">
</iframe> 

<li>Dzieła sztuki renesansu</li> 
<li>Dzieła sztuki współczesnej</li> 
<li>Dzieła sztuki literackiej</li>
<hr /> 
<li>Dzieła sztuki malarskiej</li>
<blockquote><b><u><i> Nie zrozumiecie sztuki, póki nie
zrozumiecie, że w sztuce 1 + 1 może dać każdą liczbę z
wyjątkiem 2. </i></u></b></blockquote>
<li>Dzieła sztuki muzycznej</li>
</ol>
</ul>
</body> 
</html>

Plik mapa zawiera strukturę dokumentu HTML:

<!DOCTYPE html>
<html> 
<head>
<title>Mapa</title>
<charset="utf-8" />
<meta name="author" content="Kowalski" /> 
<meta name="keywords" content="sztuka, malarstwo" /> 
<name="description" content="Zeus z Olimpii" />
</head> 
<body>  

<img src="zeus.jpg" title="Zeus" alt="Zeus Olimpijski"/ usemap="#starozytnosc">

<audio controls loop autoplay src="audio.mp3" type="audio/mpeg">Plik dźwiękowy nieobsługiwany</audio>

<map name="starozytnosc">
    <area target="_blank" alt="Posąg Zeusa w Olimpii" title="Zeus" href="https://pl.wikipedia.org/wiki/Posąg_Zeusa_w_Olimpii" coords="165,565,561,5" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii"  coords="0,662,161,0,157,10" shape="rect">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="564,650,681,0" shape="rect">
    <area target="_blank" alt="Fidiasz" title="Fidiasz" href="https://pl.wikipedia.org/wiki/Fidiasz" coords="342,708,141" shape="circle">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="314,860,9,668,4,857,156,857,239,859" shape="poly">
    <area target="_blank" alt="Świątynia Zeusa w Olimpii" title="Świątynia" href="https://pl.wikipedia.org/wiki/Świątynia_Zeusa_w_Olimpii" coords="675,854,380,856,676,660,677,778,677,808" shape="poly">
</map>

</body> 
</html>

R1CWxqA0wbrV4

Załącznik zawiera archiwum zip z plikami strony internetowej.

Załącznik zawiera archiwum zip z plikami strony internetowej

Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Plik ZIP o rozmiarze 12.33 MB w języku polskim

Komentarze

Kod źródłowy przedstawiony powyżej jest już kodem dość skomplikowanym. Gdy powrócisz do niego za jakiś czas, możesz zastanawiać się, dlaczego został napisany w ten sposób. Przydatne mogą być w takim przypadku komentarze, które wstawione w kod zostaną pominięte przez przeglądarkę przy wyświetlaniu strony internetowej, a będą widoczne w kodzie. Komentarze występują w każdym języku programowania, pomagając w ustaleniu np. czego dana część kodu dotyczy. W języku HTML komentarz wielolinijkowy umieszczany jest pomiędzy znacznikami <!- oraz ->. Jednolinijkowy komentarz możesz również wstawić używając dwóch ukośników //. Przykładowa informacja może być również wskazówką dla autora i może wyglądać w ten sposób:

R18nMaMwIRYu9

Na ilustracji pokazano sposób wstawiania komentarzy do kody HTML. W górnej części edytora HTML widoczny jest komentarz wielolinijkowy. Komentarz umieszcza się wewnątrz nawiasów ostrych. Po nawiasie ostrym lewostronnie domkniętym umieszcza się wykrzyknik oraz myślnik. Komentarz kończy się myślnikiem poprzedzającym znak nawiasu ostrego prawostronnie domkniętego. Komentarz na rysunku zaczyna się w trzydziestej drugiej linii a kończy w trzydziestej szóstej. Tekst komentarza brzmi: ramka zagnieżdżona. Zawiera ilustrację posągu Zeusa w Olimpii. Poniżej komentarza znajduje się kod odpowiadający kolejnym elementom listy. Na końcu linijek kody znajduje się komentarz jednolinijkowy. Komentarz jednolinijkowy jest oznaczony przez dwa ukośniki. Ukośniki są postawione jeden po drugim bez jakiegokolwiek białego znaku. Za ukośnikami widoczny jest przykładowy tekst: Należy uzupełnić informacje o sztuce renesansu. — Fragment kodu HTML z komentarzem jednolinijkowym oraz wielolinijkowym
Źródło: GroMar Sp. z o.o., licencja: CC BY 3.0.

Zapamiętaj!

Język HTML umożliwia tworzenie stron internetowych, oznaczanie na nich rozdziałów, sekcji, tytułów, oddzielanie akapitów, załączanie tabel, ramek zagnieżdżonych, formularzy, grafiki i multimediów, oraz łączenie tego wszystkiego za pomocą odnośników.

Język CSS służy do formatowania elementów HTML (określania wyglądu strony, rozmiaru czcionek, koloru tła itp.). Poznasz go na dalszych etapach edukacji.

Ostatnią czynnością wieńczącą wysiłek włożony w przygotowanie strony WWW będzie jej umieszczenie na serwerze WWW. Umiejętności te ukształtujesz na innych etapach nauki, ale już teraz, dysponując wiedzą i umiejętnościami z zakresu projektowania i tworzenia stron internetowych w HTML, możesz przystąpić do realizacji poważnego projektu mającego postać witryny WWW.