HTML. Witam w wirtualnym języku HTML

Transkrypt

1 HTML Witam w wirtualnym języku HTML ostatni

2 Wyja nienieś Okre lenie ąhtmlą będzie używane w znaczeniu ogólnego języka opisuj cego strukturę dokumentów stron WWW. Zapoznaj c się z tym językiem poznasz zasady projektowania stron WWW zgodnie z najnowszymi technologiami, a jednocze nie działaj cych także w starszych przegl darkach.

3 Katalog: W edytorze tworzymy nowy dokument Pusty dokument zapisujemy w stworzonym katalogu. Nazwa dokumentu to: Index w rozszerzeniu html Index.html

4 Znaczniki: Znacznik otwieraj cy Tex lub elem.html Znacznik zamykaj cy <nazwa_elementu> Zawarto ć </nazwa_elementu> Element PrzykładŚ <h1>strona robocza</h1>

5 Znaczniki cd. Poszczególne elementy strony s opisywane znacznikami znajduj cymi się w kodzie źródłowym. Znacznik składa się z nazwy elementu znajduj cej się w nawiasach ostrych (< >). Przegl darka wie, że tekst znajduj cy się pomiędzy takimi nawiasami nie może być wy wietlany w oknie przegl darki.

6 Znaczniki cd. znacznikiem końcowym, ang. end tag)poprzedzonym znakiem prawego uko nika (ang. slash, /). Znacznik zamykaj cy działa trochę jak wył cznik dla elementu. Należy uważać, by w znacznikach nie użyć przez przypadek znaku lewego uko nika (ang. backslash, \).

7 Obrazek:

8 Wyja nieniaś 1- <!DOCTYPE html> Jest to deklaracja typu dokumentu (znana także jako deklaracja DOCTYPE),ktora wskazuje, że jest to dokument HTML5. 2- Cały dokument znajduje się wewn trz elementu html. Jest on nazywany głownym elementem, ponieważ zawiera wszystkie inne elementy, a poza tym nie można go umie cić w innym elemencie. Zasady te dotycz zarowno języka HTML, jak i XHTML.

9 3 - W elemencie html dokument jest podzielony na dwie sekcje: head i body. W elemencie head (nagłowek) s umieszczone informacje opisuj ce dokument, takie jak tytuł, stosowane arkusze stylow, skrypty i inne metadane 4- Elementy meta w sekcji head dostarczaj informacji o samym dokumencie. 5- Ważnym elementem sekcji head jest title, ponieważ zgodnie ze specyfikacj HTML wszystkie dokumenty musz posiadać tytuł

10 6 W sekcji body umieszcza się wszystko to, co ma zostać wy wietlone przez przegl darkę.

11 Pocz tkowa strona WWWŚ Cały dokument powinien być objęty parą znaczników <html></html>. Między nimi powinna zaś się znaleźć para znaczników <head> </head>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <body> </body>. Wygląda to następująco: <html> <head> informacje nagłówkowe </head> <body> wła ciwa tre ć (ciało) dokumentu </body> </html>

12 cd.: Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title>. <head> <title>tytuł strony</title> </head>

13 <h1> <h2> <p> <em> W dokumencie nadajemy znaczniki dla tekstu. Nad grywamy plik podziwiamy efekty!

14 Elementy blokowe i liniowe Każdy element blokowy rozpoczyna się od nowego wiersza i zazwyczaj nad całym elementem oraz pod nim domy lnie dodawany jest jaki odstęp Nagłówki i akapity traktowane s jak elementy blokowe. Przegl darki traktuj elementy blokowe tak, jakby znajdowały się w małych prostok tnych pojemnikach, ułożone jeden na drugim

15 Element liniowy <em> <span> Em- element akcentuj cy Nie rozpoczyna się on od nowego wiersza, ale pozostaje czę ci akapitu. Elementy wewnętrzne nie rozpoczynaj nowych wierszy, pozostaj na swoim miejscu.

16 Elementy puste Znaczniki które nie s zamykane Służ jako proste instrukcje informuj ce np. o konieczno ci wczytania obrazka Elementy najczę ciej wykorzystywane toś <img> obrazek <hr> linia pozioma <br>nowa linia

17 Atrybuty i wstawianie obrazka To informacje okre laj ce lub modyfikuj ce element Różne elementy wymagaj różnych atrybutów <img> wymaga atrybutu src który wskazuje lokalizację pliku obrazka za pomoc jego adresu URL.

18 Składnia atrybutow atrybut=ąwarto ćą W znaczniku atrybuty umieszcza się po nazwie elementu. W niepustych elementach dodaje się je tylko w otwieraj cym znacznikuś <element atrybut=ąwarto ćą> <element atrybut=ąwarto ćą>zawarto ć</element>

19 W znaczniku można umie cić więcej niż jeden atrybut kolejno ć ich wpisywania nie ma znaczenia, trzeba jedynie oddzielać je spacjami. <element atrybut1=ąwarto ć atrybut2=ąwarto ćą>

20

21 Atrybuty umieszczane s po nazwie elementu tylko w znaczniku otwieraj cym, nigdy w zamykaj cym. Do elementu można stosować większ liczbę atrybutow rozdzielanych spacjami w znaczniku otwieraj cym. Ich kolejno ć nie jest istotna Atrybuty przyjmuj warto ci, ktore następuj po znaku rowno ci (=). W zależno ci od przeznaczenia atrybutu warto ć może być liczb, słowem, łańcuchem znakow, adresem URL lub miar.

22 Drugim bardzo ważnym elementem jest informacja o stronie kodowej dokumentu. Zalecamy stosowanie strony kodowej ISO (czyli ISO Latin 2). Jest to międzynarodowy standard, a ąprzy okazjią także Polska Norma. Powinni my sporz dzać dokument w tym standardzie i zarazem opatrywać go informacj typu META. Jest ona umieszczana w ramach znaczników head i wygl da następuj coś <meta http-equiv="content-type" content="text/html; charset=iso8859-2">

23 c.d. Stosowanie standardu kodowania Windows-1250 nie jest zabronione, ale nie jest również zalecane. Dokument HTML przygotowany standardowym notatnikiem Windows zawiera polskie znaki w formacie windows W dokumencie takim należy umie cić elementś <HEAD> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </HEAD>

24 Uwaga: wielkie litery w deklaracji DTD (Document Type Definition) s konieczneą Przed dokumentem, tj. przed otwieraj cym znacznikiem <html> dodaj jeszcze zalecan definicję typu dokumentu, czyli tzw. prologś <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

25 Oto jak przykładowo powinien wygl dać dokument w formacie HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-88592" /> <meta name="description" content="tu wpisz opis zawartości strony" /> <meta name="keywords" content="tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="author" content="tu wpisz swoje imię i nazwisko" /> <title>tu wpisz tytuł strony</title> </head> <body> Tu wpisuje się treść strony </body> </html>

26 TytułyŚ W dokumentach często wprowadzamy tytuły, zwane też nagłówkami. Służy do tego polecenie <hx> </hx>. Znak h oznacza heading, natomiast x to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <h1> i zamykającego </h1>. <h1>tytuł stopnia pierwszego</h1> <h2>tytuł stopnia drugiego</h2> <h3>tytuł stopnia trzeciego</h3> <h4>tytuł stopnia czwartego</h4> <h5>tytuł stopnia piątego</h5> <h6>tytuł stopnia szóstego</h6>

27 Tytuły (nagłówki) Kilka innych przykładów, z użyciem stylu lokalnegoś <h1 style="text-alignś rightś ą> ródtytuł wyrównany do prawego marginesu</h1>

28 cd.: <h1 style="letter-spacing: 1mm; border: 3px double; padding: 10pxś ą>obramowany ródtytuł z literami co 1mm</h1> <h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-colorś blackś ą> ródtytuł w kolorze darkseagreen na tle black</h1>

29 Znacznik akapitu Akapit jest podstawowym elementem zawieraj cym tekst w dokumentach HTML i służy do wydzielania fragmentów zawieraj cych jak zwart my l. <p> </p>

30 <p style="text-align: right; ">Akapit wyrównany do prawego marginesu </p> <p style="width: 50%; text-indent: 5em; line-height: 200%; textalign: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szeroko ci 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójn wysoko ci wiersza</p>

31 Znacznik końca wiersza Znacznik końca wiersza służy do przełamywania wiersza i przenoszenia tre ci do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem. <br>

32 Następny akapitś A teraz akapit, w którym zastosujemy...<br> ten sam manewr.<br> W taki sposób możemy skracać wiersze akapitu i przenosić je niżej, co bardzo się przyda we współczesnej <br> poezji <br> pisanej <br> często <br> w słupkach <br>

33 Pozioma linia Pozioma linia to po prostu kreska ci gn ca się przez cał szeroko ć okna lub pojemnika, w którym została umieszczona. <hr>

34 Linia cd.: 2. Linii możemy nadać dowoln grubo ć i kolorś <hr style="height: 5px; color: red"> 3. Linia może mieć okre lon długo ć w pikselach lub procentach: <hr style="width: 50%; "> 4. Linia może być dosunięta do prawego marginesuś <hr style="width: 50%; text-align: right; ">

35 Blok preformatowany Blok preformatowany jest blokiem tekstu, w którym uwzględniane s białe znaki znajduj ce się w kodzie źródłowym, np. dodatkowe spacje, punkty tabulacji, znaki końca akapitu itd., które s pomijane w innych poleceniach, np. w akapicie. <pre> </pre>

36 Blok cytowany Bloku cytowanego możemy użyć przy powoływaniu się na jakie źródło. Cytat jest wy wietlany z uwzględnieniem tabulacji, za tekst powinien się znajdować w jakim elemencie blokowym, np. w akapicie: <blockquote> </blockquote>

37 Adres Polecenie (wy wietlane za pomoc kursywy) jest często stosowane w odniesieniu do bloku tekstu zawieraj cego imię i nazwisko, adres pocztowy, adres poczty elektronicznej, np.: <address> </address>

38 Blok dokumentu Polecenie div (blok, sekcja) odgrywa kluczow rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów dokumentu. Na blokach formatowanych za pomoc kaskadowych arkuszy stylów oparte s dzi nowoczesne układy stron (ang. layouty). <div> </div> Polecenie pozwala wydzielić większy blok w dokumencie, np. fragment tekstu, grafikę czy wykaz (nawet kilka różnych elementów jednocze nie), a następnie nadać mu jaki rodzaj formatowania, np. rodkowanie lub dosunięcie do prawego marginesu, nadanie koloru itd.

39 cd.: <div style="text-align:right"> <ul> <li>pierwszy punkt wykazu</li> <li>drugi punkt wykazu</li> <li>trzeci punkt wykazu</li></ul> widoczny tekst,widoczny tekst, widoczny tekst,widoczny tekst, widoczny tekst, <img src="enter.gif" width="80" height="114" alt="[enter]" /></div>

40 Obramowanie formularza Fieldset tworzy obramowanie dla znajduj cych się w jego ramach elementów formularza - każdy element, jak przyciski radiowe, pole tekstowe czy rozwijana lista wyboru, może być objęty tak ramk. <fieldset>definicja elementu formularza</fieldset> Samo obramowanie można oczywi cie uzyskać za pomoc stylów, więc wprowadzanie nowego polecenia nie byłoby zasadne. Rzeczywisty efekt widzimy dopiero po poł czeniu go ze znacznikiem <legend>. <fieldset> <legend>ankieta</legend> <textarea rows=ą3ą cols=ą30ą>wpisz opinię...</textarea> </fieldset>

41 Elementy liniowe - Zakres Zakres definiowany jest za pomoc polecenia <span> </span>. Jest elementem wydzielaj cym jaki fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomoc stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle. <span> </span> <p>w tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span style="font-style:italic; background-color:green">ten fragment jest pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p>

42 Komentarz Polecenie pozwala wstawiać do dokumentu komentarz autora. Tre ć komentarza nie będzie wy wietlana na ekranie, ale stanowi dodatkow informację dla samego autora lub osoby czytaj cej, gdy zajrzy do źródła dokumentu. <! >

43 Czcionki Czcionka pochylona : Czcionka pogrubiona : <b> </b> Superskrypt (indeks górny) : <i> </i> Subskrypt (indeks dolny) : <sup> </sup> Czcionka o stałej szeroko ci znaku Ś <sub> </sub> <tt> </tt>

44 Czcionki cd.: Duża czcionka (+1 punkt) Ś <big> </big> Mała czcionka (-1 punkt) : <small> </small>

45 Znaczniki logiczne Znaczniki logiczne odnosz się do konkretnych zastosowań, ale wizualny efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna s domy lnie przypisane do wybranego znacznika logicznego. Odwołanie do źródła Ś <cite> </cite> Definicja : <dfn> </dfn> Znacznik <dfn>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiego fragmentu tekstu, np. pojawiaj cego się po raz pierwszy w danym tek cie terminu. Przegl darki interpretuj <dfn> jako kursywę.

46 cd. znaczniki logiczne: Element usunięty Ś <del> </del> Element wstawiony : <ins> </ins> Czcionka mocno wyróżniona (strong) Ś <strong> </strong>

47 Kolory czcionki Dowolnemu fragmentowi tekstu można nadać kolor. W starszych wersjach HTML stosowano polecenie font color="nazwa_koloru", jednak w HTML 4 zostało ono uznane za przestarzałe i do okre lania koloru stosuje się obecnie style. <p style="color: blue; ">Tekst w kolorze niebieskim.</p>

48 Znaki specjalne W dokumentach WWW powinni my stosować standard kodowania ISO , gdyż taka jest przyjęta w naszym kraju norma. Stosuj c standard ISO możemy też jednak wykorzystać ąopisowyą sposób wprowadzania znaków z innych języków, a przede wszystkim różnych znaków specjalnych. Przykładowe znaki specjalneś (funt szterling) (euro) (znak praw autorskich) (zastrzeżony znak towarowy) (ułamek zwykły) (index górny) (znak akapitu) (kropka) (promil) &pound - &euro - &copy - &reg - &frac14 - ¼ &sup3 - ³ &para - &bull - &permil -

49 Wielko ć czcionki <p style="font-size: large; ">Tekst o wielko ci large</p>

50 Krój czcionki W starszych wersjach HTML stosowano polecenie font face="nazwa_kroju". W HTML 4.01 zrezygnowano z niego na rzecz stylów. Na przykładś <p style="font-family: arial; ">Tre ć akapitu wy wietlona krojem Arial</p>

51 Odsyłacze Odsyłacze (inaczejś hiperł cza, ł cza hipertekstowe, odno niki, linki) charakterystyczne elementey dokumentów w wiatowej sieci World Wide Web. Bez odsyłaczy nie istniałyby powi zania między dokumentami na tym samym serwerze, w tym samym mie cie, kraju czy kontynencie. Dzięki odsyłaczom można wi zać ze sob poszczególne strony, a doskonałym przykładem ich roli jest choćby niniejszy dokument, który został opracowany na wielu, powi zanych ze sob stronach. Gdyby nie było odsyłaczy, cała tre ć kursu musiałaby zostać przedstawiona na jednej stronie, która byłaby do ć uci żliwa w czytaniu. Odsyłacz jest niczym innym, jak wskazaniem jakiego innego miejsca.

52 Etykieta Można wyróżnić dwa rodzaje konstrukcji odsyłaczowychś do etykiet i do stron. Etykieta (zwana też zakładk lub kotwic - ang. anchor) jest znakiem, swoist elektroniczn zakładk, podobn do zakładek w ksi żce, która zaznacza jakie miejsce w tek cie. Gdy utworzymy etykietę, będziemy mogli się odwoływać nie tylko do zawieraj cej j strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik będzie mógł natychmiast skoczyć do wskazanego punktu. <a name="nazwa_etykiety"> </a>

53 Odsyłacze do etykiet <a href="strona.htm#nazwa_etykiety">tekst</a> Je li tworzymy odsyłacz do etykiety na tej samej stronie, wystarczy użyć samej nazwy etykiety, czyliś <a href=ą#nazwa_etykietyą>tekst, na którym należy klikn ć</a> UwagaŚ należy zwrócić uwagę na wielko ć liter w etykiecie. Gdy etykieta rozpoczyna się z wielkiej litery, także odsyłacz powinien zawierać nazwę etykiety pisan z wielkiej litery.

54 Odsyłacze Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomoc kliknięcia na niej myszk. <a href=ąmiejsce_doceloweą>tekst, na którym należy klikn ć</a> Oczywi cie najczę ciej stosujemy odsyłacze do stron WWW, których charakterystycznym elementem jest ci g httpś//. Konstrukcja może więc mieć postaćś <a href=ąhttpś//host.domenaą>tekst odsyłacza</a>

55 Odsyłacze absolutne i względne Warto wiedzieć, że rozróżniamy odsyłacze absolutne i względne (relatywne). Pierwsze zawieraj pełny adres internetowy strony, natomiast drugie jedynie fragment cieżki dostępu. Adresem absolutnym jest np. strona Portalu O2: Adresem relatywnym jest np. adres jakiej wiadomo ci w Portalu O2: /news/96251.html

56 Odsyłacze cd.: Odsyłacz do innej strony HTML (w tym samym katalogu)ś <a href=ąnazwa_strony.htmlą>edytor Paj czek</a> Odsyłacz do innej strony w katalogu podrzędnym Ś <a href=ąkatalog_podrzędny/nazwa_strony.htmlą>inna strona</a> Odsyłacz do strony w innym katalogu, równorzędnym w hierarchiiś <a href=ą../katalog_równorzędny/nazwa_strony.htmlą>jeszcze inna strona</a>

57 Odsyłacze do poczty elektronicznej i FTP Często stosowanym odsyłaczem jest konstrukcja pozwalaj ca czytelnikowi strony wysłać do jej autora (lub jakiejkolwiek innej osoby) pocztę elektroniczn. Jej konstrukcja wygl da następuj coś <a href="mailto:imie_nazwisko@adres">tutaj kliknij</a> Możemy jeszcze dodatkowo opatrzyć odsyłacz stosownym obrazkiem. W tym miejscu zastosujemy obrazek .png, wstawiaj c definicję przed adresem.

58 Odsyłacze cd.: Gdyby my sobie zażyczyli, aby w momencie wysyłania poczty przez czytelnika strony w polu tematu listu pojawiła się jaka domy lna tre ć, możemy zdefiniować odsyłacz na przykład tak: <a href="mailto:wimmer@helion.pl?subject=bardzo ważny list:"> W podobny sposób można predefiniować adres odbiorcy, do którego idzie kopia listu: <a href="mailto:wimmer@helion.pl?cc=jan.kowalski@firma.pl">

59 Odsyłacze cd.: Tzw. lepa lub ukryta kopia, czyli BCC (żaden inny odbiorca listu nie zobaczy tego adresu): <a Można też zdefiniować fragment ciała listu, a więc już bezpo rednio w oknie edycjiś <a href="mailto:wimmer@helion.pl?body=panie Wimmer, ja w takiej sprawie...">

60 Odsyłacze cd.: Można poł czyć wszystkie te elementy i robi się to prosto, stosuj c jako ł cznik ci g &. <a href="mailto:wyslij@list.pl?cc=jan.kowal@firma.pl& bcc=jozef.kwiatek@firma.pl&ampśsubject=bardzo ważny list&ampś body=witajcie Panowieą>Wy lij pocztę</a>

61 cd. odsyłacześ Przy definiowaniu adresu poczty (a nawet szerzej, pełnego adresu) możesz się także posłużyć znacznikiem logicznym <address> </address>, który automatycznie nada odpowiedni atrybut (zazwyczaj interpretowany przez przegl darki jako kursywa), a cało ć umie cić w obramowanym bloku div. <div style="border: 3px double olive; width:250px; "> <address> dane adresowe </address> </div>

62 Mapy odsyłaczy na obrazkach <img src="odsylacz.gif " usemap="#mapa1"> <map name ="mapa1"> <area shape="rect" coords="1, 1, 50, 50" href="1.html" alt="strona 1"> <area shape="rect" coords="51, 1, 100, 50" href="2.html" alt="strona 2"> <area shape="rect" coords="1, 51, 51, 100" href="3.html" alt="strona 3"> <area shape="rect" coords="51, 51, 100, 100" href="4.html" alt="strona 4"></map>

63 Wykazy Wykazy, zwane też czę ciej listami, które służ do sporz dzania usystematyzowanych zestawień informacji, prezentowanych w punktach - nieuporz dkowanych (punktowanych, nienumerowanych) lub uporz dkowanych (numerowanych). Wykazy należ do elementów blokowych.

64 Wykaz nieuporządkowany Wykaz nieuporz dkowany - służy do sporz dzenia wykazu nienumerowanego, w którym kolejne punkty s wyróżniane punktorami. Polecenie <ul> </ul> tworzy ramy wykazu, natomiast polecenia <li> </li> wprowadzaj konkretne punkty. <ul> <li>pierwszy punkt</li> <li>drugi punkt</li> <li>trzeci punkt</li> </ul>

65 Atrybut type=disc wprowadza kółeczko, type=circle wprowadza puste kółeczko, natomiast type=square wprowadza kwadracik. Obecnie stosowane s style CSS, daj ce znacznie większe mozliwo ci formatowania. <ul style="list-style-type: circle"> <ul style="list-style-type: square">

66 Zagnieżdżanie wykazów nieuporz dkowanych Możemy zagnieżdżać kilka poziomów listy nieuporz dkowanej. Każdy kolejny, niższy poziom powinien zawierać własn definicję listy i powinien się kończyć jej zamknięciem. <ul>(otwarcie listy na pierwszym poziomie) <li>punkt 1</li> <li>punkt 2 (bez znacznika zamykaj cego) <ul>(otwarcie listy na drugim poziomie) <li>podpunkt 2.1</li> <li>podpunkt 2.2 (bez znacznika zamykaj cego) <ul>(otwarcie listy na trzecim poziomie) <li>podpunkt 2.2.1</li> <li>podpunkt 2.2.2</li> </ul>(zamknięcie listy na trzecim poziomie) </li> (zamknięcie podpunktu 2.2) </ul>(zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li>punkt 3 - kontynuacja punktów pierwszego poziomu</li> <li>punkt 4 - kontynuacja punktów pierwszego poziomu</li> </ul>(zamknięcie całej listy)

67 Wykaz uporz dkowany Wykaz uporz dkowany służy do sporz dzenia wykazu numerowanego, w którym istotna jest dla nas kolejno ć elementów. Ramy wykazu tworzy polecenie <ol> </ol>, natomiast punkty s wprowadzane, podobnie jak w wykazach nieuporz dkowanych, za pomoc polecenia <li> </li>. <ol> <li>pierwszy punkt</li> <li>drugi punkt</li> <li>trzeci punkt</li> </ol>

68 cd. numerowanie: Atrybut type, wprowadza numerowanieś Warto ć type=a wprowadza numerowanie według wielkich liter łacińskich, type=a numerowanie według małych liter łacińskich, type=i numerowanie według wielkich liczebników rzymskich, type=i numerowanie według małych liczebników rzymskich, wreszcie type=1 numerowanie według liczebników arabskich. W dzisiejszych czasach w ich miejsce stosowane s style CSS. <ol style="list-style-typeś decimal Ś> <ol style="list-style-type: lower-roman > <ol style="list-style-type: upper-alpha >

69 Zagnieżdżanie wykazów uporz dkowanych Możemy zagnieżdżać kilka poziomów listy uporz dkowanej. Każdy kolejny, niższy poziom powinien zawierać własn definicję listy i powinien się kończyć jej zamknięciem. <ol>(otwarcie listy na pierwszym poziomie) <li>punkt 1</li> <li>punkt 2 (bez znacznika zamykaj cego) <ol>(otwarcie listy na drugim poziomie) <li>podpunkt 2.1</li> <li>podpunkt 2.2</li> </ol>(zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li>punkt 3 (bez znacznika zamykaj cego) <ol>(otwarcie listy na drugim poziomie) <li>podpunkt 3.1</li> <li>podpunkt 3.2</li> </ol>(zamknięcie listy na drugim poziomie) </li>(zamknięcie Punktu 3) </ol>(zamknięcie całej listy)

70 Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następuj c postaćś <img src="plik_graficzny" alt="nazwa alternatywna"> Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazw alternatywn, a więc tak, która poinformuje o zawarto ci ilustracji w urz dzeniu nie odczytuj cym grafiki. Efekt zastosowania konstrukcji jest następuj cyś

71 cd. wstawianie grafiki: Przegl darka automatycznie odczytuje wła ciw wysoko ć i szeroko ć ilustracji, ale zazwyczaj w edytorach HTML wielko ci te s jawnie wstawiane, np. <img src= fon.jpgą width=ą342ą height=ą353ą alt= Fontannaą> Możemy ręcznie zmienić rozmiary Ś <img src= fon.jpgą height=ą150ą width=ą200ą alt= Fontannaą>

72 Obramowania i odstępy <img src= fon.jpgą width=ą171ą height=ą177ą alt= Fontannaą style="border: 5px red solid; ">

73 Style CSS - margines globalny (margin) lub cz stkowy (margin-top, margin-bottom, margin-left, margin-right). <img src="fon.jpg" width="171" height="176" alt="fontanna" style="margin-left: 10px; margin-right: 50px; "> Akapit 50 pikseli nad i 50 pod obrazkiem : <img src= fon.jpgą width=ą171ą height=ą176ą alt= Fontannaą style="margin-top: 50px; margin-bottom: 50px; ">

74 Style CSS cd.: Aby umie cić ilustrację przy prawym marginesie, należy jej nadać styl style="float: right; ". <img src= fon.jpgą width=ą171ą height=ą176ą alt= Fontannaą style="float: right; ">

75 Pozycjonowanie pionowe Do dyspozycji mamy jeszcze technikę pionowego pozycjonowania elementów względem siebie - wykorzystujemy w nim polecenie stylów vertical-align, które zast piło przestarzały atrybut align (top, middle, bottom). <img src= fon.jpgą width=ą85ą height=ą88ą alt= Fontannaą style="vertical-align: top; ">

76 Macromedia Flash Powszechnie stosowany kod: <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" wflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align=""> <param name="movie" value="movie.swf"> <embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash" pluginspage=" </object>

77 Rozwi zanie McLellana (Flash)Ś <object type="application/x-shockwave-flash" data="film.swf" width="200" height="150"> <param name="movie" value="film.swf"> </object>

78 Rozwi zanie Elizabeth CastroŚ Rozwi zanie Elizabeth Castro (WMV): <object type="video/x-ms-wmv" data="kot.wmv" width="320" height="260"> <param name="src" value="kot.wmv"> <param name="autostart" value="false"> <param name="controller" value="true"> </object> Działa też analogiczne odwołanie do pliku Wav : <object type="video-/x-ms-wmv" data="swist.wav" width="200" height="60"> <param name="src" value="swist.wav"> <param name="autostart" value="true"> <param name="controller" value="true"> </object>

79 cd.: Działa odwołanie do pliku ASF (Advanced Streaming Format). <object type="video-/x-ms-wmv" data="pliczek.asf" width="200" height="60"> <param name="src" value="pliczek.asf"> <param name="autostart" value="true"> <param name="controller" value="true"> </object> Real Media <object type="audio/x-pn-realaudio-plugin" data="318.ra" width="200" height="60"> <param name="src" value="318.ra"> <param name="autostart" value="true"> <param name="controller" value="true"> </object>

80 Tabele Cała zawarto ć tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowi jej delimitery. W ich ramach s umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. <table border="1" width="50%"> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

81

82 Tabele Szeroko ć okre lona w pikselach Wyrównanie do prawej całej tabeli Wstawienie grafiki jako tło tabeli <table border width= 150ą style="float:right; " style="background-image: url(pliki/1.jpg)"> <tr> <td> 1</td><td> 2</td><td> 3</td></tr> <tr> <td> 1</td><td> 2</td><td> 3</td></tr> <tr> <td> 1</td><td> 2</td><td> 3</td></tr> </table>

83 Ogólne ramy tabeli Ramy tabeli tworzone s za pomoc poleceniaś <table> </table> Cała zawarto ć tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowi jej delimitery. W ich ramach s umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

84 Wiersz tabeli Wiersze tabeli wprowadzamy za pomoc poleceniaś <tr> </tr> Wiersz tabeli jest jej konkretyzacj, a sam tworzy z kolei ramy dla komórek z danymi. W ramach <table> </table> można umie cić wiele kolejnych definicji wierszy <tr> </tr>, dla przykładuś <table> <tr> </tr> <tr> </tr> <tr> </tr> </table>

85 Komórka w wierszu Komórki tabeli wprowadzamy za pomoc poleceniaś <td> </td> Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki s umieszczane między znacznikami wybranego wiersza, na przykładś <table> <tr> <td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td></tr> </table>

86 Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Je li nie podamy szeroko ci obramowania, przyjmowana jest jej domy lna warto ć. <table border> </table> Gdyby my podali szeroko ć obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przegl darkę, na przykładś <table border="10"> </table>

87 Odległo ci między komórkami Aby odległo ci miedzy komórkami w pikselach były inne niż domy lne, możemy użyć atrybutu cellspacing. Powoduje to pogrubienie obramowania między nimi. <table border cellspacing="8"> </table> Odstępy w komórkach Ś <table border cellspacing="5" cellpadding="15"> </table>

88 Szeroko ć tabeli Atrybut width daje nam możliwo ć samodzielnego zdefiniowania szeroko ci tabeli. Podany atrybut jest ąsilniejszyą od innych atrybutów, które wpływaj na szeroko ć tabeli na ekranie. <table border width="600"> </table> Zamiast warto ci absolutnej w pikselach możemy także użyć warto ci procentowej Ś <table border width="50%"> </table>

89 Szeroko ć komórki <td style=ąwidthś 150pxś ą>zawarto ć komórki</td> Można też podać warto ć procentow, która odnosi się do szeroko ci komórki w ramach tabeli, a nie całego ekranu. <td style=ąwidthś 50%ś ą>zawarto ć komórki</td>

90 Wyrównanie tabeli W efekcie tabela zostanie przesunięta w prawo <table style="float:right; "></table> i oblana z lewej strony tekstem. Tabela przesunięta w lewo Ś <table style="float:left; "></table>

91 Poziome wyrównanie danych w komórkach Atrybut align wykorzystuje się także do poziomego wyrównania zawarto ci komórki (a nawet całego wiersza tr) - rodkowania, justowania do lewej i justowania do prawej, z użyciem warto ci center, left i right. <td align="left"> </td> <td align="center"> </td> <td align="right"> </td>

92 Wysoko ć tabeli <table border style="height: 200px; width: 60%; "> Warto ć podana w procentach będzie interpretowana jedynie wtedy, gdy tabela będzie umieszczona w pojemniku wyższego rzędu o podanej wysoko ci. <div style="height: 200px; "> <table border style="height: 50%; width: 60%; ">

93 Pionowe wyrównanie danych w komórkach Atrybut valign (vertical align) służy do pionowego wyrównania zawarto ci komórki - do górnego brzegu, do rodka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcjiś <td valign="top"> </td> <td valign="middle"> </td> <td valign="bottom"> </td>

94 Kolor tła tabeli <table style="background-color: red"> <tr style="background-color: beige"> <td style="background-color: green">

95 cd. tabele: Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka - o stosowano atrybut background="nazwa_obrazka", ale obecnie jest to polecenie przestarzałe i stosuje się style CSSŚ <table style="background-image: url(adres_obrazka)">

96 Kolor obramowania tabeli <table border cellspacing=ą1ą cellpadding=ą5 style=ąborderś 15px outset #D2691E; ">

97 Tytuł tabeli Tabela powinna na ogół zawierać tytuł, wyja niaj cy jej tre ć. Należy go umie cić zaraz za ogólnymi ramami tabeli. <table border style="width: 300px; "> <caption>tytuł tabeli</caption> Za pomoc stylów CSS możesz zdefiniować położenie tytułu, nad lub pod tabel Ś <caption style="caption-sideś topś ą>tytuł tabeli</caption>

98 Nagłówek wiersza i kolumny Zazwyczaj w tabelach s umieszczane nagłówki wierszy i kolumn, obrazuj ce ich tre ć. Domy lnie nagłówki s pokazywane za pomoc czcionki pogrubionej i w przypadku kolumn pozycjonowane na rodku. Nagłówek jest definiowany za pomoc znacznikówś <th> </th>

99 cd. tabele: Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocz ć od komórki z nagłówkiem. <table border cellpadding="10" width="500"> <caption>wzrost produkcji masła i margaryny w latach (w mln USD)</caption> <tr><td></td><th>1991</th> <th>1992</th> <th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr style="text-alignś centerś ą><th>masło</th> <td>1150</td><td>1240</td><td>1380</td><td>1420</td><t d>1550</td></tr> <tr style="text-align: center; "><th>margaryna</th> <td>800</td><td>900</td><td>980</td><td>1150</td><td>1 320</td></tr> </table>

100 Ł czenie komórek Komórki danych i/lub nagłówków można ze sob ł czyć. Przykład Ś <tr style="text-align: center"> <th>masło</th><td rowspan="2">1950</td><td rowspan="2">2120</td><td>1380</ td><td>1420</td><td>1550</td> </tr> Aby komórka w danym wierszu rozci gała się na x wierszy, należy użyć w jej definicji atrybutu <td rowspan="x">. W naszej tabeli zostały opatrzone atrybutem rowspan="2" dwie pierwsze komórki z danymi w wierszu Masło (i oczywi cie podana ł czna produkcja tłuszczów). Jednocze nie usunęto dwie pierwsze komórki z danymi w wierszu Margaryna. Pozostałe trzy komórki wiersza Margaryna (lata ) dostosowały się do odpowiednich komórek w wierszu Masło.

101 Krawędzie tabeli Atrybut frame="wartość" pozwala wy wietlać w specjalny sposób obramowanie tabeli. Wstawiamy go bezpo rednio do definicji tabeli. Przykłady warto ci frame podajemy w poł czeniu z warto ci rules="none", czyli bez obecno ci wewnętrznych krawędzi. <table border=ą1ą frame=ąwarto ćą rules=ąnoneą> Warto ć frame="void" pozwala usun ć zewnętrzne obramowanie tabeli. Warto ć frame="above" wstawia górn krawędź obramowania, a frame="below" - doln.

102 cd. tabele: Warto ć frame="vsides" wy wietla lew i praw krawędź obramowania tabeli, a frame="hsides" - górn i doln. Warto ć frame="lhs" wy wietla lew krawędź obramowania, a frame="rhs" - praw. Warto ć frame="box" wy wietla wszystkie krawędzie obramowania. Seria warto ci atrybutu rules="wartość" pozwala manipulować wewnętrznymi krawędziami tabeli (przykłady z użyciem frame=ąvoidą, czyli bez obecno ci krawędzi zewnętrznych). <table border=ąxą rules=ąwarto ćą frame=ąvoidą>

103 cd. tabele: Warto ć rules="none" powoduje usunięcie linii wewnętrznych. Warto ć rules=rows powoduje wy wietlenie tylko poziomych linii wewnętrznych. Warto ć rules="cols" powoduje wy wietlenie tylko pionowych linii wewnętrznych (Opera ma problemy). Warto ć rules="all" powoduje wy wietlenie wszystkich linii wewnętrznych.

104 Formularze Formularze służ do otrzymywania i wysyłania informacji od go ci odwiedzaj cych nasz strone. Elementy formularza s tworzone w pewnych ramach s nimiś <form> </form> Wysyła tekst pod wskazany adres nie jako zał cznik, a jako zwykły tekst (enctype=ątext/plain ). <form enctype="text/plain" action="mailto:autor_strony@jego_domena"method="post"> zawarto ć formularza </form>

105 Imię i nazwisko <fieldset> <form action="mailto:wimmer@helion.pl" method="post"> <p><i><b>wpisz swoje imię i nazwisko:</b></i></p> <div><input name="imie" type="text" size="40" /></div> </form> </fieldset> Ile masz lat? <fieldset> <form action="mailto:wimmer@helion.pl" method="post"> <p><i><b>ile masz lat?</b></i></p> <p><i><b>mniej niż 20 <input name="wiek" type="radio" value="020" /> <input name="wiek" type="radio" value="21-40" /> <input name="wiek" type="radio" value="41-60ą /> więcej niż 60 <input name="wiek" type="radio" value=">60" /></b></i></p> </form> </fieldset>

106 Jakiej przegl darki używasz? <fieldset> <form method="post"> <p><b><i>jakiej przegladarki WWW używasz?</i></b></p> <div><select name="browser" size="3"> <option>firefox</option> <option>microsoft Internet Explorer</option> <option>opera</option> <option>konqueror</option> <option>safari</option> </select></div> </form> </fieldset> Select - służy do tworzenia rozwijalnych list z opcjami, spo ród których czytelnik wybiera interesuj ce go pozycje.

107 Przykład: <form enctype="text/plain" method="post"> <div> <textarea name="okno tekstowe" cols="30" rows="4"> </textarea></div> <div> <select name="lista wyboru" size="3"> <option>jabłka</option> <option>gruszki</option> <option> liwki</option> <option>wi nie</option> <option>maliny</option> </select></div> </form>

108 Pole opcji <p><input type="radio" name="plec" value="kobieta" checked="checked"> Kobieta</p> <p><input type="radio" name="plec" value="mezczyzna"> Mężczyzna</p> Pole wyboru <p><input type="checkbox" name="jezyk" value="angielski"> angielski</p> <p><input type="checkbox" name="jezyk" value="francuski"> francuski</p>

109 cd. formularze: Jest to np. obramowane miejsce na wpisanie tekstu. <fieldset> <legend>ankieta</legend> <textarea rows=ą3ą cols=ą30ą>wpisz opinię...</textarea> </fieldset>

110 Wysyłanie danych z formularza <input type="submit" value=ąwy lij do nas informacjeą> Usuwanie danych z formularza <input type=ąresetą value=ąusuń wszystkie informacje"> Gdy wpiszesz co do obszaru tekstowego i klikniesz przycisk Wyślij informacje, zostanie uruchomiony program pocztowy (uwagaś adres pod który wysyłane s informacje jest adresem podanym po słowie Action). Gdy klikniesz przycisk Usuń, zawarto ć obszaru tekstowego zostanie przywrócona do pierwotnej postaci. PrzykładŚ

111 Ramki Opisują one technikę budowania witryny poprzez ramki. Najbardziej typowym przykładem użycia ramek jest podział okna przegl darki na kilka czę ci poziomych lub pionowych. Podstawow rolę w ąramkowymą dokumencie pełni specjalna strona, na której definiujemy liczbę, wielko ć i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia ł cza hipertekstowego. Jest ona kontenerem dla ramek. Pozostałe strony, wchodz ce w skład całego, wielostronicowego układu, s stronami podrzędnymi. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " td"> <html> <head> <title>edytory HTML</title> </head> <frameset cols="25%,*%"> <frame scrolling="auto" name="lista edytorów" src="spisedyt.htm"> <frame scrolling="yes" name="edytory" src="edyt.htm"> <noframes> <body> Zawarto ć strony dla przegl darek nie obsługuj cych ramek </body> </noframes> </frameset> </html>

112 Ramki cd.: <frameset> </frameset> Stanowi one ramy dla całej konstrukcji i między nimi s umieszczane bardziej szczegółowe znaczniki, dotycz ce liczby ramek, podziału strony i wielko ci ramek. <noframes> </noframes> Służ one do wprowadzenia elementów strony, które będ widoczne dla posiadacza przegl darki, która nie akceptuje ramek. Je li natomiast czytelnik strony posługuje się nowoczesn przegl dark, wszelkie informacje między tymi znacznikami zostan zignorowane (rzadko stosowane).

113 cd. ramki: <frame> Znacznik ten służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówi cymi o zawarto ci (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiuj cymi nazwę ramki. <frame src="nazwa_pliku.htm"...> Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakie dokumenty, zazwyczaj w formacie HTML. Przywoływany plik może się znajdować w tym samym katalogu lub jakimkolwiek innym - podajemy wtedy nazwę pliku z pełn cieżk dostępu - może to nawet być dokument w innej witrynie.

114 cd. ramki: <frame scrolling="yes"...> Je li przywoływany plik jest spory objęto ciowo, zapewne nie zmie ci się w cało ci w ramce. Możemy w takim razie użyć atrybutu scrolling, który wy wietli ramkę razem z suwakami (yes), bez suwaków (no), lub automatyczne suwaki (auto). <frame name="nazwa_ramki"...> Ponieważ stosuj c ramki używamy jednocze nie często odsyłaczy, powinni my jako nazwać nasz ramkę - name. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.

115 cd. ramki: <frame noresize...> Czytelnik dokumentu może regulować wielko ć wy wietlonych ramek, przesuwaj c brzegi za pomoc myszki. Gdy jednak użyjemy w definicji atrybutu <frame noresize...> zabezpieczymy ramkę przed skalowaniem.. Domy lnie, wszystkie ramki s skalowalne <frame frameborder="1"...> Atrybut frameborder="1" lub frameborder="0" pozwala ustalić, czy obramowanie danej ramki będzie wy wietlane, czy też nie.

116 cd. ramki: <frameset cols="18%,82%"> Przykład, w którym lewa ramka zajmuje 18% szeroko ci okna przegl darki, a prawa ramka - 82%. <frameset rows="200,*,200"> Gdyby my dzielili stronę na trzy wiersze, mogliby my, przez analogię, użyć konstrukcji, w której np. górna ramka ma 200 pikseli, dolna 200 pikseli, a rodkowa zajmuje pozostały obszar, zależny od wielko ci okna przegl darki.

117 cd. ramki: Przykład w cało ciś <frameset cols="25%,75%"> <frame src="ramka1.html" name="spis" scrolling="auto"> <frame src="ramka2.html" name=ątrescąscrolling= noą> </frameset>

118 Odsyłacze w ramkachś Teraz powinni my się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiedni stronę w innej ramce. Jest to kluczowa sprawa, je li chcemy wykorzystać ramki w dokumentach. Zauważmy, że w podanym na pocz tku kliknięcie na odsyłaczu w spisie tre ci w lewej ramce powinno załadować dokument do prawej ramki, a nie do ramki ze spisem tre ci. W tym miejscu wykorzystujemy nazwy, które nadawali my poszczególnym ramkom.

119 Odsyłacze w ramkachś <frameset cols="25%,*"> <frame scrolling="auto" name="lista edytorów" src="spisedyt.html"> <frame scrolling="auto" name="edytory" src="edyt.html"> <noframes> </noframes> </frameset> Strona1: <body bgcolor="green"> <HR> <H1>To jest strona 1</H1> <A HREF="ramka.html" target="_top">wróć </A> Strona ta składa się z dwóch ramek. Lewa zawiera spis tre ci, natomiast do prawej s ładowane odpowiednie strony z opisami. Lewej nadali my nazwę lista edytorów, natomiast prawej edytory. PrzykładŚ

120 Etykiety w ramkach: Etykieta - inaczej zakładka lub kotwica (ang. anchor) - to pewne zaznaczone miejsce na stronie. Je li zdefiniujemy tak zakładkę, będziemy mogli się później do niej bezpo rednio przenosić. Definiowanie etykiety: <a name="nazwa_etykiety"></a> Odwołanie do etykietyś <a href="(ścieżka do strony)#nazwa_etykiety">opis odsyłacza</a> Etykieta zdefiniowana na tej samej stronie nie potrzebuje cieżki dostępu PrzykładŚ

121 Odsyłacze i etykiety w ramkach/ target: Zwróćmy jeszcze uwagę na cztery zastrzeżone warto ci w przypadku atrybutu target. target="_blank" - w tym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nowe okno lub instancję przegl darki. target="_self" - w tym przypadku (przypadek domy lny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku. target="_parent" - w tym przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bież cego dokumentu. target="_top" - w ostatnim przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na sam ągóręą. Przykład ze strony ejś

122 Ramki (pływaj ce): Jest to technika umieszczania na stronach WWW tzw. pływaj cych ramek, czyli specjalnych okienek, do których wczytywane s inne strony. Pływająca ramka jest ramk umieszczon w dowolnym miejscu strony i jest prostsza w konstrukcji, gdyż ogranicza się w zasadzie do jednego polecenia: <iframe src="adres_dokumentu" width=ąszeroko ć_w_pikselachą height=ąwysoko ć_w_pikselachą> Twoja przegl darka nie akceptuje pływaj cych rameką </iframe>

123 Pływaj ce ramkiś plywajaca.html <body> <img src="1.jpg" > </body> <iframe src= "plywajaca.html" width="450" height="250" frameborder="1">twoja przegl darka nie akceptuje pływaj cych rameką</iframe> Ramka o wymiarach 450x250 pikseli z obramowaniem (w ramce wstawiona strona o nazwie plywajaca.html). PrzykładŚ

124

125 KONIEC NA POCZ TEK PREZENTACJI