Język HTML

1. Język HTML

2. Podstawowe problemy w przetwarzaniu informacji • Jak zapisywać informację w sieci Internet, • Jak ją przetwarzać, • Jak wprowadzać dane, • Odpowiedź - obecnie strony WWW, język HTML.

3. Języki opisu dokumentów – SGML – trochę historii • Język SGML (ang. Standard Generalized Markup Language) - pomysł na zestan- daryzowanie uogólnionego znakowania dokumentów. • Jest to język zdefiniowany w standardzie ISO 8879 opublikowany w październiku 1986 r. Twórcą standardu jest dr Charles Goldfarb.

4. Przykład • Jeżeli np. zdefiniujemy elementy chap, title i p w następujący sposób: <!ELEMENT chap - - (title,p+)> <!ELEMENT title O O (#PCDATA)> <!ELEMENT p - O (#PCDATA)> to możemy napisać w dokumencie: <chap> <title>Tytuł rozdziału <p>Pierwszy akapit tekstu </chap> a nawet: <chap> Tytuł rozdziału <p>Pierwszy akapit tekstu </chap>

5. Co po SGML • HTML - pochodzi od SGML, SGML należy do języków kodujących dokument, a HTML należy do języków prezentacyjnych, tzn. wyświetlających dokument. • XML - pochodzi od SGML, ma zachować zgodność w „dół” z HTML. Zrezygnowano z DTD, ponieważ jego opracowanie jest sprawą złożoną.

6. XML • XML (skrót od eXtensible Markup Language - rozszerzalny język znaczników) to otwarty standard opracowany przez W3C. Otóż XML nie jest kolejnym językiem do przechowywania konkretnych danych, jak np. język HTML opisujący wygląd stron sieciowych. XML to język opisujący dane, czyli metajęzyk. W uproszczeniu można powiedzieć, że XML służy do tworzenia innych języków (aplikacji XML) służących do przechowywania informacji.

7. W języku XML opisem dla danych są one same • Można również stosować schematy Definicji Typu Dokumentu (znane jeszcze z SGML, DTD) i inne sposoby deklarowania jego zawartości (jak XML Schemas), ale rzadko jest to potrzebne. Czytelność XML, nawet bez użycia specjalnych narzędzi, to jedna z jego ważniejszych zalet.

8. Przykład informacji zapisanej w XML <ludzie> <człowiek dane="poprawne"> <imie>Paweł</imie> <nazwisko>Stroiński</nazwisko> <poczta>pawel@pabloware.w.pl</poczta> <web>http://www.pabloware.w.pl/</web> </człowiek> <człowiek dane="fikcyjne"> <imie>Jan</imie> <nazwisko>Kowalski</nazwisko> <poczta>webmaster@kowalski.net</poczta> <web>http://www.kowalski.net</web> </człowiek> </ludzie>

9. HTML - co to jest? • HTML to skrót od angielskiego HyperText Mark-up Language. • Jest to swoisty język programowania, który służy do "opisu stron". "Opis stron" to reguły określania wyglądu tekstu (wielkość, czcionka, pogrubienie, kursywa itd.). • Najważniejszą cechą HTML jest to, że jest on kompatybilny z każdym systemem operacyjnym (Windows, MacOS, OS/2, rożne odmiany Unixa, itd.). • HTML jest językiem (ale nie programowania)

10. Historia HTML (na podstawie http://kurshtml5.edu.pl/) • W 1993 roku organizacja IETF (ang. Internet Engineering Task Force) opublikowała pierwszy szkic specyfikacji języka HTML. Producenci przeglądarek mogli zgłaszać swoje propozycje do specyfikacji przez okres 6 miesięcy. W tym samym roku w szkicu HTML+ zasugerowano standaryzację zaimplementowanych znaczników. • W 1994 roku powstała Grupa Robocza HTML (ang. HTML Working Group), która w 1995 roku zaprezentowała specyfikację HTML 2.0. Był to pierwszy oficjalny standard. Specyfikacja ta zawierała pomysły ze szkicu HTML oraz HTML+. Język umożliwiał określenie koloru tła, umieszczenie obrazka w tle, tworzenie tabel oraz formularzy. • W 1995 roku została zaprezentowana trzecia wersja tego języka, lecz z powodu zbytniej złożoności, prace nad nią zostały przerwane. Od 1996 roku specyfikacje HTML były rozwijane przez konsorcjum producentów oprogramowania World Wide Web Consortium (W3C) pod kontrolą, którego rozwój języka trwa do chwili obecnej. • W 1997 roku HTML 3.2 został opublikowany jako rekomendacja. Wprowadzał on nowe atrybuty oraz obsługę CSS (ang. Cascading Style Sheets). W tym samym roku czarta wersja tego języka została opublikowana jako rekomendowana. Wprowadziła kilka nowych elementów, a wszystkie kwestie dotyczące wyglądu strony przejął CSS. Język ten został zaproponowany w trzech typach (Strict, Transitional, Frameset). W 1999 roku została wydana uaktualniona wersja pod numerem 4.01. Obecnie jest to ostatnia rekomendowana wersja tego języka. • W 2004 roku producenci Mozilli oraz Opery przedstawili swoje stanowiska na temat rozwoju HTML. Została stworzona specjalna grupa WHATWG (ang. Web Hypertext Application Technology Working Group), która w 2008 roku przedstawiła pierwszy publiczny szkic HTML 5. • Do końca 2011 roku producenci przeglądarek mogli zgłaszać swoje uwagi do specyfikacji, natomiast w 2012 roku HTML 5 przeszedł w fazę kandydata do rekomendacji. • W 2013 roku prace nad piątą wersją języka zostały zakończone, a w 2014 roku ma być on uznany za oficjalnie rekomendowany

11. Zgodność przeglądarek z HTML5

12. Organizacja i nawigacja - struktura liniowa Strona główna

13. Organizacja i nawigacja - struktura hierarchiczna Strona główna

14. Organizacja i nawigacja - struktura liniowa z alternatywą Strona główna

15. Organizacja i nawigacja - struktura mieszana (liniowo hierarchiczna) Strona główna

16. Organizacja i nawigacja - struktura sieciowa (pajęczyna) Strona główna

17. Elementy HTML • Publiczne identyfikatory tekstu HTML • Znaczniki łamania tekstu • Listy • Kroje czcionek • Tabele • Grafika i multimedia • Sieć dokumentów HTML • Tu znajduje się przegląd wszystkich znaczników dostępnych w poszczególnych wersjach HTMLhttp://webmaster.helion.pl/index.php/spis-polecen/32-tabela-znacznikow

18. Pierwszy plik HTML <HTML> <!to jest moja pierwsza strona - kometarz> <HEAD> <TITLE>Mój pierwszy HTML</title> </HEAD> <BODY> <h1> Cześć</h1> <h2>Oj, oj, a co z polskimi znaczkami?</h2> Może inne?: ążźęćńłóĄŹŻĆŃŁÓ To mój pierwszy HTML </BODY> </HTML>

19. Dodatkowe informacje o dokumencie <!DOCTYPE HTML> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Mój pierwszy HTML</TITLE> </HEAD> <BODY> <h1> Cześć</h1> Oooo, są polskie znaczki, :) Więcej polskich znaczków: ążźśęćłóĄŻŚŹĆĘŁŃ To mój pierwszy HTML </BODY> </HTML>

20. Ogólne informacje o budowie znaczników • <INSTRUKCJA> - instrukcja HTML (tzw. „tag”, „znacznik”) • </INSTRUKCJA> - koniec obszaru działania instrukcji. • Mogą występować tagi bez zakończonego obszaru działania, np.. <BR>, • Znaczniki, które nie musza być zakończone </tag> można pisać <tag/>, np. <BR/> • Przykłady: • <HEAD> ... </HEAD> (obszar nagłówka) • <BODY> .... </BODY> (obszar ciała) • <TITLE> ... </TITLE> (obszar pisania tytułu) • <H1> ... </H1> (obszar nagłówka) • <! Tekst> - oznacza komentarz (nie wyświetlany)

21. Znaczniki - parametry znaczników • Znaczniki mogą mieć parametry, np..: • <P ALIGN=justify> ..... </P> • <IMG SRC=”obrazek.gif”> • Wartości parametrów często ujmuje się w cudzysłowy, • Zwłaszcza wtedy, gdy nazwy są wieloczłonowe.

22. Nagłówki • Nagłówki służą do podziału tekstu na części, są elementami ogólnego planu strony, • mogą składać się wielu linii tekstu, • zazwyczaj nagłówki umieszcza się na górze strony, • w HTML zostało zdefiniowanych sześć poziomów nagłówka (od H1- najbardziej się wyróżnia do H6 - najmniej się wyróżnia), • Różnią się między sobą wielkością i atrybutami czcionki (pogrubienie, podkreślenie, itd.), • Przykład: <H1>Opis języka HTML</H1>

23. Formatowanie paragrafów • Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), • występuje zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, • <P> ... </P> - tagi paragrafu, • Parametry „taga” P: • <P align=left>...</P> - do lewej, • <P align=right>...</P> - do prawej, • <P align=center>...</P> - centrowanie, • <P align=justify>...</P> - do lewej i do prawej, • <BR> - nowy wiersz bez przerywania paragrafu • <NOBR> ... </NOBR> - wyświetl tekst bez załamania wiersza • <WBR> - punkt łamania linii (zwykle między <NOBR>) • <CENTER> ... </CENTER> - centrowanie tekstu

24. Przykład dla paragrafów <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Paragrafy</TITLE> </HEAD> <BODY> Bez paragrafów: Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki), występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, <P>Z paragrafami</P> <P> Paragrafy używamy dla wypisania myśli, paragraf może zajmować kilka wierszy (to zależy od przeglądarki),</P> <P>występują zazwyczaj między nagłówkami i jest używany min. do rozmieszczania tekstu między marginesami, </P> </BODY> </HTML>

25. Listy • Listy służą do wyróżniania poszczególnych grup informacji, strukturalizują tekst dokumentu, • Listy wypunktowane (są zaznaczane kropkami lub innymi symbolami), tag <UL>...</UL> • Listy mogą być zagnieżdżone, • Parametry: <UL Type=atrybut>, gdzie atrybut może być równy: • „disc” - kółko lub kropka, • „square” - mały kwadrat, • „circle” - wypełnione (większość przeglądarek) kółko,

26. Listy - cd. • Lista numerowane, są oznaczane kolejnymi liczbami (arabskimi, rzymskimi), tag <OL>...</OL> • Atrybuty: • Type=”1” - standardowa numeracja, • Type=”a” - numeracja za pomocą kolejnych małych liter alfabetu, • Type=”A” - numeracja za pomocą kolejnych małych liter alfabetu, • Type=”i” - numeracja za pomocą kolejnych małych liczb rzymskich, • Type=”I” - numeracja za pomocą kolejnych dużych liczb rzymskich, • START=wartość, np.. START=”C” • VALUE - rozpoczyna numerację listy od początku, • COMPACT - oznacza, że lista powinna zajmować jak najmniej miejsca na ekranie

27. Przykład dla list <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Paragrafy</TITLE> </HEAD> <BODY> <OL start=5> <LI> <OL type="i"> <LI>A1 <LI>A2 </OL> <LI> <OL type="a"> <LI>B1 <LI>B2 </OL> <OL> </BODY> </HTML>

28. Listy - cd. • Lista definicyjna - każdy element składa się dwóch części: pojęcie definiowane DT (ang. definition term) i definicji pojęcia DD (ang. definition definition) , np. • <DL> • <DT>pojęcie <DD> definicja • </DL> • Listy definicyjne mówią, że pojęcie i jego definicja będą zazwyczaj w osobnych wierszach, oraz linia DD jest przesunięta w prawo. Np. • <DL> • <DT> Programowanie <DD>Zapisywanie algorytmu w języku programowania • </DL>

29. Listy - cd. • Listy katalogów i menu • są bardzo podobne do paragrafów, mogą być formatowane inaczej, niż zwykłe akapity • są to zazwyczaj bardzo krótkie teksty, • nie są zbyt często wykorzystywane w praktyce (przeglądarki nie rozróżniają tych list).

30. Przykład <HTML> <BODY> <MENU> <LI>w lewo <LI>w prawo <LI>w dół <LI>w górę </MENU> <DIR> <LI>Spożywcze <LI>Przemysłowe <LI>Rozrywka </BODY> <HTML>

31. Tekst preformatowany • Tekst preformatowany jest używany wtedy, gdy chcemy zachować wszystkie znaki odstępu, tabulacji, puste linie i rozmieszczenie tekstu. Czcionka jest nieproporcjonalna (litera i i m zajmują tyle samo miejsca). Używamy go do np. prezentacji tekstu programu. Np. • <PRE> • Tekst preformatowany jest • Tak wyświetlany, jak został napisany • </PRE>

32. Style fizyczne • <EM>...</EM> - wyróżnienie, • <STRONG>...</STRONG> - wyróżnienie mocniejsze, • <CODE>...</CODE> - oznacza fragment kodu, • <SAMP>...</SAMP> - oznacza tekst przykładowy, • <KBD>...</KBD> - oznacza tekst, który ma być wpisany przez użytkownika • <VAR>...</VAR> - oznacza nazwę zmiennej lub innego elementu • <DFN>....</DFN> - oznacza definicję • <CITE>...</CITE> - oznaczamy cytaty • <B>...</B> - pogrubienie, • <I>...</I> - kursywa, • <BIG>...</SUB> - czcionka większa od reszty tekstu, • <SMALL>...</SMALL> - czcionka mniejsza od reszty tekstu, • <SUB>...</SUB> - indeks dolny, • <SUP>...</SUP> - indeks górny.

33. Przykład dla styli fizycznych <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250"> <TITLE>Tekst preformatowany</TITLE> </HEAD> <BODY> zwykły tekst<BR> <EM>Wyróżniony tekst</EM><BR> <STRONG>Mocniejsze wyróżnienie</STRONG><BR> <CODE>oznacza fragment kodu</CODE><BR> <SAMP>oznacza tekst przykładowy</SAMP><BR> <KBD>oznacza tekst, który ma być wpisany przez użytkownika</KBD><BR> <VAR>oznacza nazwę zmiennej lub innego elementu</VAR><BR> <DFN>oznacza definicję</DFN><BR> <CITE>oznaczamy cytaty</CITE> </BODY> </HTML>

34. przykład <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1250"> <TITLE>Tekst preformatowany</TITLE> </HEAD> <BODY> zwykły tekst<BR> <B>pogrubienie</B> <BR> <I>kursywa</I><BR> <TT>czcionka maszynowa</TT> <BR> <U>podkreślony</U><BR> <S>przekreślenie</S><BR> <BIG>czcionka większa od reszty tekstu</BIG><BR> <SMALL>czcionka mniejsza od reszty tekstu</SMALL><BR> a<SUB>indeks dolny</SUB><BR> b<SUP>indeks górny</SUP> <BR> </BODY> </HTML>

35. Linie poziome • Służą do wizualizacji poszczególnych fragmentów strony - znacznik HR. • Atrybuty HR: • SIZE - grubość linii w pikselach, • WIDTH - długość linii w pikselach albo w procentach, • ALIGN - sposób umieszczenia linii, • NOSHADE - linia jest rysowana bez cienia • Przykład: • <HR ALIGN=RIGHT, SIZE=10, WIDTH=60%, NOSHADE>

36. Znaki specjalne • Służą do wstawiania znaków, które przez przeglądarkę mogą być zinterpretowane jako znaki formatujące, • poprzedzamy je znakiem & (ampersand) • Znaki specjalne - przykłady: • &lt; - <, • &gt; - > • &#n - znak o kodzie n • Przykład • <BODY> • <HR Size=5 width=50 Align=left> • &lt Tekst1&gt <Tekst2> • <HR Size=1 width=150> • </BODY>

37. Inne znaczniki • <article> Pozwala na lepszą semantykę HTML poprzez zdefiniowanie pojemnika który zawiera spójny zbiór elementów, niezależny od innych treści. Ułatwia to publikację kilku artykułów o różnej tematyce na jednej stronie. • <aside> Pozwala na zdefiniowanie pojemnika który nieznacznie jest powiązany z treścią. Może służyć do oddzielenia reklam, tekstu od głównego tekstu. • <audio> Pozwala na umieszczenie muzyki na stronie bez dodatkowych wtyczek. • <bdi> Pozwala na odseparowanie tekstu który jest formatowany w innym kierunku niż pozostała część tekstu .Przydatne podczas pisania tekstów np: w języku arabskim. • <canvas> Pozwala na dynamiczne renderowanie kształtów i obrazów bitmapowych. Grafika jest tworzona za pomocą Javasciptu. Możliwe jest generowanie elementów 2d oraz 3d.

38. Inne znaczniki • <datalist> Pozwala na wpisanie własnych wartości do autouzupełniania .Zastępuje znacznik <select>. • <details> Pozwala na zdefiniowanie dodatkowych detali które użytkownik może zobaczyć lub ukryć. Może być użyte do długiej listy(np: aktorów)która po kliknięciu się rozwija lub zwija. • <dialog> Pozwala na wskazanie dialogu pomiędzy ludźmi lub numerami. Przykładowy dialog może zawierać rozmowy ze spotkań, czatu. • <embed> Pozwala na umieszczenie na stronie aplikacji lub treści interaktywnych nie będących w formacie HTML. Najczęściej są to aplikacje do których niezbędne jest doinstalowanie dodatkowych wtyczkę np : Adobe Flash • <figcaption> Pozwala na podpisanie załącznika, zbioru elementów. Często wykorzystywany w publikacjach naukowych do podpisania zbioru rysunków.

39. Inne znaczniki • <figure> Pozwala na oznaczanie danych multimedialnych, które są istotne dla danego artykułu (sekcji), lecz mogą także być prezentowane samodzielnie. • <footer> Stopka zastępuje używany w HTML4 <div id=”footer”> <header> Nagłówek zastępuje używany w HTML4 <div id=”header”> • <keygen> Pozwala na wygenerowanie klucza RSA lub innego dla użytkownika. Wygenerowane zostaną 2 klucze z czego pierwszy zostanie u użytkownika a drugi zostanie wysłany do serwera. • <mark> Pozwala na wyróżnienie tekstu tak by zwrócić uwagę użytkownika. Podkreśla tekst przy użyciu żółtego “mazaka”.

40. Inne znaczniki • <meter> Pozwala na statyczne pokazanie postępu. Jest to statyczny odpowiednik znacznika • <progress>.Nadaje się do pokazania np: pozostałego miejsca na hostingu. • <nav> Pozwala na wydzielenie sekcji strony która zawiera odnośniki do strony lun innych stron. Służy głównie do nawigacji po stronie ( menu strony). • <output> Pozwala na wyświetlenie wyników obliczenia wykonanego przez Javascript. • <progress> Pozwala na pokazanie paska postępu. Nadaje się do pokazania np: postępu wgrywania plików na serwer.

41. <ruby> Pozwala na wprowadzenie adnotacji nad fragmentem tekstu. Stosowany do pokazania wymowy znaku lub wyrazu. W znaczniku <ruby> należy umieścić objaśniany tekst. • <rp> Pozwala na wprowadzenie wymowy słowa umieszczonego w znaczniku <ruby> • <rt> Pozwala na wprowadzenie adnotacji w przeglądarce która nie obsługuje znacznika <ruby> • <section> Reprezentuje sekcję dokumentu która zawiera nagłówek. Sekcjami może być np: rozdział ksiązki lub grupowane tematycznie treści na stronie. • <source> Pozwala na określenie kilku źródeł pliku dla elementu <audio> oraz • <video>.Jeżeli przeglądarka nie obsługuje pierwszego formatu próbuje odtworzyć alternatywny format wideo podany jako druga ścieżka(source).

42. Inne znaczniki • <summary> Pozwala na zmianę nazwy, legendy dla znacznika <details>. • <time> Pozwala na oznaczenie daty jakiegoś zdarzenia. Data jest podana według kalendarza gregoriańskiego lub w formacie 24h.Jest to czas przeznaczony dla aplikacji lub robotów sieciowych. • <track> Pozwala na określenie ścieżki tekstowej dla elementu • <video>.Przy jego użyciu można dołączyć np: napisy do filmu lub rozdziały pomagające w nawigacji. • <video> Pozwala na umieszczenie video na stronie bez dodatkowych wtyczek. • <wbr> Pozwala na opcjonalne łamanie wiersza. Wiersz jest łamany tylko w razie gdy nie mieści się w divie.

43. Połączenia • Połączenia służą do tworzenia hiperpołączeń (połączeń z innymi plikami) oraz do tworzenia specjalnych miejsc wewnątrz stron, do których prowadzą inne połączenia. • Do tworzenia połączeń służy tag A z atrybutem HREF • <A HREF=”nazwa_pliku”>tekst podświetlony</A>, gdzie nazwa_pliku ma postać adres URL/specyfikacja, • przykłady: • HREF=”users/moje/dane/list01” • HREF=”../users/moje/dane/list01” • HREF=”/users/moje/dane/list01” • HREF=”d:\users\moje\dane\list01” • HREF=”http://www.wp.pl/users/mojehobby/start.html • HREF=”http://www.serwer/moje%20dokumenty/jan%2f.html” - oznacza nazwę pliku moje dokumenty/jan/f - jan/f jest nazwą pliku.

44. Połączenia • Odnośniki - odnośniki służą do wskazywania miejsc w dokumencie, • Tworzymy je za pomocą atrybutu NAME w tagu A: • <A NAME=”nazwa”>opis_odnośnika</A> • przejście do nazwanego miejsca: • <A HREF=”nazwa_pliku#nazwa”>opis</A>

45. Przykład • Pierwszy plik o nazwie plik: <HTML><HEAD><TITLE>Wybierz okno</TITLE></HEAD> <BODY> <H1>Wybierz nadrzędne okno</H1> <P><A HREF=”plik1.htm” TARGET=”pierwsze_okno”>Otwiera</A> <BR> <P><A HREF=”plik2.htm” TARGET=”pierwsze_okno”>Ładuje nowy tekst do pierwsze pierwsze_okno</A> </P> </BODY> </HTML>

46. Przykład działania TARGET - cd • Drugi plik o nazwie plik1.htm: <HTML><HEAD><TITLE>Pierwsze okno</TITLE></HEAD> <BODY> <H1>Pierwsze okno</H1> </BODY> </HTML> • Trzeci plik o nazwie plik2.htm: <HTML><HEAD><TITLE>Pierwsze okno</TITLE></HEAD> <BODY> <H1>Pierwsze okno</H1> <P>Z nowym tekstem </P> </BODY> </HTML>

47. Działanie • Działanie: wczytujemy plik o nazwie plik.htm do przeglądarki, • Po kliknięciu napisu „Otwiera” otwierane jest nowe okno o nazwie pierwsze_okno • po kliknięciu napisu „ładuje nowy tekst do okna o nazwie pierwsze_okno” zastępuje zawartość „Pierwsze okno” zawartością „Pierwsze okno z nowym tekstem”.

48. Uwaga • Znacznik BASE: • zamiast dodawać znacznik TARGET do każdego znacznika A można za pomocą taga BASE wskazać, że wszystkie połączenia na stronie będą skierowane do tego samego okna, • składnia: <BASE TARGET=”nazwa_okna”>

49. Inny przykład wykorzystania znacznika target <HTML> <Body> <H1> Witryny, z których korzystam</H1> <A HREF="http://onet.pl">Onet</a><BR> <A HREF="http://wp.pl" target=a>Wirtualna Polska</a><BR> <A HREF="http://interia.pl" target=a>interia</a><BR> <A HREF="http://mirek/ii3.uph.edu.pl/grafika" target=b>zajecia z HTML</a><BR> </HTML>

50. Obrazy • Obrazy mogą być: • wewnętrzne (pojawiają się na stronie razem z tekstem i połączeniami) • zewnętrzne (są przechowywane poza stroną WWW) • muszą być zapisane w odpowiednim formacie: GIF, JPEG lub BMP • do obsługi obrazów graficznych służy znacznik IMG, • sposób użycia: <IMG SRC=”nazwa_obrazka”>