Informatyka w zarządzaniu III rok - HTML

Transkrypt

1 Informatyka w zarządzaniu III rok - HTML Wstęp Języki programowania (technologie) powiązane z Internetem w kolejności zgodnej ze wzrastającym stopniem skomplikowania: HTML i XHTML, arkusze stylów (CSS), JavaScript i skrypty DOM, skrypty po stronie serwera, XML, Java. HTML to skrót od Hypertekst Markup Language, tłumaczony jako język znaczników hipertekstowych. Hyper oznacza, że HTML nie jest językiem liniowym. Języki programowania mają zazwyczaj strukturę liniową innymi słowy struktura programu określa kolejność jego wykonania (stąd też potwierdzenie, że HTML nie jest typowym językiem programowania jak, np. C++). W przypadku strony WWW użytkownik ma możliwość skorzystania z dowolnej opcji strony w dowolnym czasie. Drugi człon nazwy, Text, to narzędzie, którym się posługujemy, a jest nim zwykły (no, może nie całkiem zwykły) tekst. Niezwykłość tekstu bierze się stąd, że umieszczany jest on w specjalnych znacznikach, < >, </>, i one właśnie są odpowiedzialne za kolejny człon nazwy: Mark-up. Dzięki znacznikom przeglądarka wie, że ma do czynienia z kodem strony WWW, a nie ze zwykłym tekstem. Znaczniki nadają specjalne atrybuty i instruują przeglądarkę jak interpretować wygląd tekstu. Ostatnia litera w skrócie HTML to L od Language, co oznacza język. HTML jest bowiem językiem publikowania w sieci WWW, a co najważniejsze, językiem niezależnym od stosowanej platformy sprzętowej, czyli rodzaju komputera, z jakiego korzystamy. HTML (HyperText Markup Language) jest więc językiem wykorzystywanym do tworzenia dokumentów strony internetowej. Jego uaktualniona wersja XHTML (extensible HTML), jest zasadniczo tym samym językiem o bardziej rygorystycznych regułach składni. Często można się spotkać z połączonym zapisem (X)HTML oznaczającym HTML oraz XHTML. (X)HTML nie jest językiem programowania, jest językiem znaczników, co oznacza, że jest systemem identyfikacji oraz opisu rożnych komponentów dokumentu, takich jak nagłówki, akapity czy listy. HTML pozwala: Publikować dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia, formularze, itp. Pobierać za pośrednictwem połączeń hipertekstowych informacje z Internetu (mówiąc w skrócie polega to na klikaniu połączeń, co uaktywnia pobieranie danych). Projektować formularze pozwalające na korzystanie ze zdalnych usług, takich jak na przykład wyszukiwanie informacji, dokonywanie rezerwacji oraz zamawianie produktów. Umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje. Podsumowując: Język HTML język przeznaczony do opisywania dokumentów hipertekstowych, prezentowanych i odczytywanych następnie w sieci WWW za pomocą przeglądarki. Poszczególne elementy składowe strony WWW, takie jak tytuły, akapity, obrazy, dźwięki, łączniki z innymi dokumentami, adresy stron WWW są wyróżniane w tym języku za pomocą znaczników, które pełnią funkcję poleceń dla przeglądarki. Dzięki temu hipertekst może być opisany z użyciem bardzo prostego edytora tekstowego. 1

2 Podczas gdy (X)HTML wykorzystywany jest do opisywania zawartości strony internetowej, kaskadowe arkusze stylów (CSS) opisują to, w jaki sposób zawartość ta ma wyglądać. W świecie projektowania stron internetowych wygląd witryny określany jest mianem prezentacji. CSS jest teraz oficjalnym i standardowym mechanizmem formatowania tekstu oraz układu elementów na stronie. CSS udostępnia również metody kontrolowania sposobu prezentacji dokumentów w mediach innych od tradycyjnej przeglądarki na ekranie, na przykład w druku, czy w urządzeniach trzymanych w dłoni. Zawiera również reguły określające prezentację niewizualną dokumentów, na przykład sposób ich brzmienia w czytnikach ekranu (ang. screen reader). Arkusze stylów są również świetnym narzędziem pozwalającym zautomatyzować tworzenie witryny, ponieważ można wprowadzić zmiany do wszystkich jej podstron, edytując pojedynczy dokument z arkuszem stylu. Arkusze stylów są obsługiwane do pewnego stopnia przez wszystkie nowoczesne przeglądarki. Choć da się publikować strony internetowe z użyciem samego (X)HTML, najprawdopodobniej będzie się wolało dodać do witryny arkusze stylów, by nie być ograniczonym do domyślnych stylów przeglądarki. Współczesne projektowanie stron internetowych często przedstawia się jako składające się z trzech niezależnych warstw : Treść dokumentu wraz ze znacznikami (X)HTML składa się na warstwę struktury. Stanowi ona podstawę, do której stosuje się pozostałe warstwy. Po umieszczeniu struktury dokumentu na właściwym miejscu można dodać informacje z arkusza stylów, które pozwalają na kontrolowanie wyglądu treści dokumentu. Warstwa ta nosi nazwę warstwy prezentacji. W końcu warstwa zachowania zawiera skrypty, które sprawiają, że strona staje się interaktywna. Dodatkowe pojęcia niezbędne do zrozumienia istoty tworzenia stron internetowych: Strona WWW (World Wide Web) dokument napisany w języku HTML i w takiej postaci przechowywany w serwerze WWW. Zawiera hipertekst uzupełniony elementami graficznymi i multimedialnymi. Osoba zainteresowana obejrzeniem danej strony może ją pobrać z serwera, posługując się przeglądarką zainstalowaną we własnym komputerze. World Wide Web (w skrócie WWW) to sieć komputerów nazywana popularnie Internetem. Tworzą ją komputery z całego świata. Serwer WWW to odpowiednio oprogramowany komputer podłączony na stałe do Internetu, udostępniający zasoby obsługiwanych przez siebie witryn WWW zgłaszającym się przeglądarkom (komunikacja z serwerami wymaga określonych protokołów sieciowych zestawów reguł umożliwiających porozumiewanie się odległych komputerów najbardziej rozpowszechnionym protokołem jest HyperText Transfer Protocol, oznaczany skrótowo jako Miejsce na serwerze można wykupić u dowolnego dostawcy usług internetowych lub można skorzystać z darmowego serwisu internetowego, udostępniającego miejsce na swoich serwerach. Warto poświęcić trochę miejsca komputerom, z których składa się Internet. Ponieważ serwują one dokumenty na żądanie, zostały nazwane serwerami. Serwer to tak naprawdę oprogramowanie (a nie sam komputer), które pozwala komputerowi na komunikację z innymi komputerami. Przyjęło się jednak, że słowa serwer używa się również w odniesieniu do samego komputera. Rola oprogramowania serwera polega na oczekiwaniu na żądanie informacji, pobraniu tej informacji i jak najszybszym jej odesłaniu. 2

3 o W samych komputerach tego typu nie ma nic specjalnego. Można je sobie wyobrazić jako cokolwiek, od maszyny o dużej mocy opartej na Uniksie po zwykły komputer osobisty. Za wszystko odpowiedzialne jest oprogramowanie serwera. By komputer mógł być częścią Internetu, musi na nim działać specjalne oprogramowanie serwera WWW pozwalające na obsługę transakcji protokołu HTTP. Serwery WWW są również nazywane serwerami HTTP. o Każdy komputer w Internecie ma przypisany unikalny liczbowy adres IP (IP pochodzi od Internet Protocol). Na przykład komputer, który udostępnia stronę oreilly.com, ma adres IP Wszystkie te liczby mogą przyprawiać o ból głowy, dlatego na szczęście powstał system DNS (Domain Name System), który pozwala na odnoszenie się do serwera również po nazwie domeny (oreilly.com). Liczbowy adres IP jest użyteczny dla komputerów, natomiast nazwa domeny jest bardziej czytelna dla ludzi. Dopasowanie tekstowych nazw domen do odpowiadających im adresów IP jest zadaniem osobnego serwera DNS. o Możliwe jest skonfigurowanie serwera WWW w taki sposób, by więcej niż jedna domena była odwzorowywana na jeden adres IP, co pozwala wielu stronom na współdzielenie jednego serwera. Wiemy już, że serwer służy do serwowania stron, jednak co jest drugą stroną równania? Oprogramowanie wykonujące żądanie nazywane jest klientem. W Internecie oprogramowaniem klienta przesyłającym żądania dokumentów jest przeglądarka. Żądania danej strony dokonujemy poprzez podanie jej adresu URL. Następnie serwer zwraca dokumenty do przeglądarki, by mogła je ona wyświetlić. Adres URL to skrót od Uniform Resource Locator, co można przetłumaczyć jako uniwersalny identyfikator zasobów. Adres ten wpisujemy najczęściej w polu adresu przeglądarki. Przeglądarka wysyła wiadomość do komputera, którego adres został podany (serwera), zawierającą żądanie strony. Serwer pobiera odpowiednie dane i przekazuje je występującemu o nie komputerowi. Dokument HTML dokument napisany w języku HTML. Taki dokument można utworzyć w najprostszym edytorze tekstu, np. w Notatniku, programie ze środowiska Windows. Do odczytywania dokumentów HTML służą przeglądarki, np. Internet Explorer. Podsumowując - Jak to działa? Wszelkie informacje umieszczone w sieci zapisane są w dokumentach zwanymi stronami WWW. Strona WWW to dokument utworzony za pomocą języka HTML. Gotowe strony WWW zapisywane są na specyficznym komputerze, który nazywamy serwerem. Serwer to właściwie program, ale przyjęło się nazywać tym mianem także komputer, na którym go zainstalowano. Serwer jest odpowiedzialny za realizację żądania przesłania dokumentów do tego komputera, który wystąpił z takim żądaniem. Jest także konieczny do opublikowania dokumentów w Internecie. Internet z kolei stanowi sieć komputerów połączonych ze sobą. Oczywiście nie fizycznie. Komputery mogą jednak komunikować się ze sobą i przesyłać sobie dane, czyli informacje. Strony WWW stanowią jedno ze źródeł informacji. Aby przeglądać strony WWW, konieczne jest nawiązanie połączenia z Internetem za pośrednictwem modemu lub łącza stałego i uruchomienie specjalnego programu, który nazywa się przeglądarką. Przeglądarkę należy poinformować, gdzie ma szukać danych. Informacja ta zawarta jest w adresie URL. 3

4 4

5 1. Znaczniki Dokument HTML zawiera tekst, który ma być umieszczony na stronie i polecenia (zwane znacznikami lub tagami), które stanowią informacje dla przeglądarki, jak ten dokument ma być wyświetlony na ekranie. Polecenia, dla odróżnienia od zwykłego tekstu umieszcza się w nawiasach kątowych < >. Prawie każde polecenie języka HTML składa się z dwóch części otwierającej i zamykającej. Różnią się one tym, że część zamykająca poprzedzona jest znakiem / (czyli </ >). Znaczniki kontrolują formatowanie i układ dokumentu na ekranie przeglądarki. Aby lepiej zrozumieć funkcjonowanie języka HTML, spróbuj potraktować znaczniki HTML jako przymiotniki. Kolor obiektu, na przykład piłki, można opisać korzystając z takich przymiotników jak niebieska, czerwona czy żółta. Relację względem innego obiektu można z kolei wyrazić za pomocą słów takich jak: z lewej, z prawej, w centrum. Podobnie HTML pomaga opisać wygląd i ulokowanie tekstu, obrazów i innych obiektów na Twojej stronie WWW. 2. Budowa dokumentu HTML Dokumenty (X)HTML, tak jak człowiek, mają głowę (ang. head) oraz ciało (ang. body). Głowa dokumentu, nazywana również nagłówkiem, zawiera opisowe informacje o samym dokumencie, w tym jego tytuł, wykorzystywany arkusz stylów, skrypty i inne rodzaje metainformacji. Ciało dokumentu zawiera treść wyświetlaną w oknie przeglądarki. Dokument w języku HTML jest zawarty między znacznikami: <html> i </html> i dzieli się na dwie części: nagłówek - głowę dokumentu między tagami <head>.. </head> treść - ciało dokumentu między tagami <body>.. </body> Nagłówek rozpoczyna się poleceniem <head>, a treść poleceniem <body>. Przed dokumentem, tj. przed otwierającym znacznikiem <html> należy dodać jeszcze zalecaną definicję typu dokumentu, czyli tzw. Prolog, który informuje że strona jest tworzona w języku HTML. Definicja typu dokumentu, DTD, to specyfikacja towarzysząca każdemu dokumentowi stworzonemu w języku SGML (Standard Generalized Markup Language), której zadaniem jest dostarczenie przeglądarce istotnych informacji o składni dokumentu. Innymi słowy definicje DTD umożliwiają określenie zasad stosowania znaczników. 5

6 DTD zawiera przeważnie definicje nazw i zawartości wszystkich rodzajów elementów, jakie mogą wystąpić w danym dokumencie. Może także określać wymaganą kolejność elementów oraz zasady ich zagnieżdżania, dopuszczalne atrybuty wraz z ich domyślnymi wartościami, warunki rezygnacji ze znaczników końcowych czy nazwy predefiniowanych symboli, do których można się odwoływać w dokumencie. DTD wstawiamy w następujący sposób: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Lub w skrócie: <!DOCTYPE html> A oto najprostszy szablon stworzony w języku HTML: <!DOCTYPE html> <html> <head> Treść nagłówka </head> <body> Treść dokumentu </body> </html> Zadanie 1. Otwórz program Notepad ++ oraz wybraną przeglądarkę internetową. W edytorze tekstu wprowadź szablon tworzenia stron internetowych w języku HTML. W treści wpisz dowolnie wybrane zdanie. Zapisz plik i wyświetl go w celu sprawdzenia w przeglądarce. Dodatkowe informacje dotyczące szablonów stron internetowych: Element head zawiera ogólne informacje na temat dokumentu. Umieszczane są one między innymi w znaczniku <meta>. Najczęściej są to informacje przydatne przeglądarkom lub słowa kluczowe wykorzystywane przez serwisy wyszukujące. W znaczniku <meta> można na przykład umieścić adres url, pod który przeglądarka ma się skierować, aby wyświetlić nową wersję strony WWW lub opis dokumentu. Można także umieścić nowy adres url, pod który użytkownik zostanie automatycznie skierowany po określonym czasie. Sekcja head (głowa) zawiera więc tzw. metainformacje (zawarte w znacznikach <meta>) o dokumencie, takie jak: sposób kodowania liter - charset tytuł - title autor strony - author tematyka (opis) - description słowa kluczowe keywords 6

7 Sekcja head: Tytuł strony <title>tytuł strony</title> Sposób kodowania znaków <meta http-equiv="content-type" content="text/html; charset=iso " /> Sposób kodowania strony <meta name="description" content="tu podaj opis twojej strony" /> Słowa kluczowe <meta name="keywords" content="wyraz1, wyraz2, wyraz3..." /> Język strony <meta http-equiv="content-language" content="język" /> Autor strony <meta name="author" content="tu wpisz swoje imię i nazwisko" /> Częstotliwość odświeżania <meta http-equiv="refresh" content="s" /> Data utworzenia <meta http-equiv="creation-date" content="data" /> Data modyfikacji <meta http-equiv="last-modified" content="data" /> Tytuł: W nagłówku znajduje się tekst tytułu poprzedzony poleceniem <title> - nie oznacza on jednak śródtytułu (nagłówka) na stronie, ale zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Zadanie 2. We wcześniej stworzonym szablonie dokumentu dodaj znacznik <title>, wprowadź dowolny tekst tytułu, zapisz dokument i wyświetl w przeglądarce w celu sprawdzenia efektów. Sposób kodowania znaków: Język HTML musi mieć możliwość obsługi różnych rodzajów języków, a co za tym idzie różnych rodzajów znaków narodowych. W związku z tym zostały określone różne strony kodowe dla różnych języków i części świata. Dla naszego kraju odpowiednim standardem jest strona kodowa ISO Jest to strona kodowa działająca na wszystkich platformach systemowych: Windows, Unix, Linux, MacOS i wielu innych, dlatego projektując stronę internetową powinniśmy stosować tą normę. Oczywiście istnieje inna możliwość kodowania np. pod systemem Windows 1250, ale ten rodzaj kodowania zadziała tylko pod systemem Windows, a na pozostałych systemach może mieć efekty przez nas niepożądane. Dokumenty powinny być sporządzane w tym standardzie: <meta http-equiv="content-type" content="text/html; charset=iso "> W przypadku pokazanym niżej użyto kodowania polskich liter stosowanego w Ms Windows co podano deklaracją: < meta http-equiv ="content-type" content ="text/html; charset =windows-1250"> Można również użyć skrótów rozpoznawanych przez przeglądarki i zastosować: <meta charset= iso "> <meta charset= windows-1250"> 7

8 Zadanie 3. W swoim edytorze HTML utwórz nową stronę i wpisz na niej cały poniższy kod. Na stronie powinien znaleźć się tylko poniższy tekst. <!DOCTYPE html> <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso "> </head> <body> ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż </body> </html> Następnie powtórz operację wpisując charset= windows Zapisz dokumenty i wyświetl w przeglądarce w celu sprawdzenia efektów. Uwaga: Jeżeli nadal, pomimo kodowania ze znacznikiem <meta>, pojawiają się krzaczki zamiast właściwych polskich znaków oznacza to, że ustawienie kodowania nie może ograniczać się jedynie do ustawienia kodowania dla przeglądarek, gdzie aby strona WWW przyjęła i obsłużyła poprawnie kodowanie należy w sekcji <head></head> do dokumentu wstawić odpowiedni znacznik <meta> definiujący typ treści oraz kodowanie znaków w formacie "typ/treści; charset=kodowanie". Należy wrócić do edytora tekstu z tego powodu, że najczęściej nasze dane odczytuje przeglądarka w dokumencie html i mimo tego, że zapisaliśmy nasz tekst w poprawnym kodowaniu, to aby prawidłowo odczytać znaki należy ustawić kodowanie jeszcze w edytorze. Najczęściej przy otwieraniu pliku mamy okienko możliwością wybrania kodowania, można także na stałe w ustawieniach edytora ustawić odpowiednie. Jeśli stosujemy Windows 1250, to odpowiednikiem w edytorze jest ANSI. Dla ISO trzeba ustawić: Format/zestaw znaków/wschodnioeuropejskie i tu ISO Obecnie coraz częściej stosuje się jednak uniwersalny system kodowania UTF-8. O ile ISO jest standardem kodowania dla polskich znaków, to UTF-8 jest standardem kodującym wszystkie znaki specjalne itd. różnych alfabetów świata (język unicode). Możemy więc nie tylko ustawić kodowanie w edytorze na UTF-8, ale również ustawić kodowanie dla przeglądarek (zamiast standardu ISO) jako: <meta http-equiv="content-type" content="text/html; charset=utf-8"> lub <meta charset="utf-8"> Zadanie 4. W swoim edytorze HTML utwórz nową stronę i wpisz na niej cały poniższy kod. Na stronie powinien znaleźć się tylko poniższy tekst. 8

9 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż </body> </html> Zapisz dokument i wyświetl w przeglądarce w celu sprawdzenia efektów. Pozostałe informacje z sekcji head: Description i keywords powinny być umieszczane do każdego artykułu oddzielnie, ab umożliwić odnalezienie przez wyszukiwarkę naszej strony. Słowa kluczowe wymieniamy rozdzielając je przecinkiem. Datę utworzenia dokumentu wpisujemy w formacie GMT, np.: "Tue, 20 Aug :25:27 GMT". W Polsce strefa czasowa jest przesunięta o +1 godz. (czas zimowy) lub +2 godz. (czas letni). Dlatego w przypadku tworzenia daty GMT, należy odjąć od czasu lokalnego odpowiednio: 1 lub 2 godziny. Zadanie 5. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). Treść wyświetlona na stronie przeglądarki: Inne informacje: Słowa kluczowe: szkodniki, chwasty, grzyby, rośliny, kwiaty, warzywa Autor: podaj swoje imię i nazwisko Dodatkowo: 9

10 Formatowanie czcionek i akapitów Nagłówki W języku HTML jest zdefiniowanych sześć poziomów nagłówków. Służą do tego znaczniki od <H1> do <H6>, gdzie znak h oznacza heading - nagłówek. Im mniejszy numer nagłówka, tym większą czcionką jest złożony. <h1> Nagłówek 1 </h1> <h2> Nagłówek 2 </h2> <h3> Nagłówek 3 </h3> <h4> Nagłówek 4 </h4> <h5> Nagłówek 5 </h5> <h6> Nagłówek 6 </h6> Jeśli uważa się, że element h1 wyświetlany przez przeglądarkę jest zbyt duży i niezgrabny, wystarczy zmienić to za pomocą arkusza stylów. Należy oprzeć się pokusie oznaczenia nagłówka innym elementem tylko po to, by wyglądał on lepiej (na przykład używając h3 w miejsce h1, by element ten nie był aż tak duży). W czasach kiedy obsługa arkuszy stylów nie była tak powszechna, w taki właśnie sposób nadużywano znaczników. Teraz, gdy istnieją arkusze stylów kontrolujące wygląd projektu, zawsze powinno się wybierać elementy zgodnie z tym, jak opisują one zawartość strony, i nie należy się przejmować domyślnym wyglądem nadawanym przez przeglądarkę. Zadanie 6. Do poprzednio stworzonej strony dodaj nagłówek (wyniki zapisz i wyświetl w przeglądarce): Zadanie 7. Dla porównania zapisz nagłówek wszystkimi rodzajami nagłówków. Formatowanie akapitów Nagłówki oraz akapity rozpoczynają się od nowych wierszy i nie są zapisane ciągiem jeden po drugim. Jest tak, ponieważ są one przykładami elementów blokowych (ang. Blocklevel element). Przeglądarki traktują elementy blokowe tak, jakby znajdowały się w małych prostokątnych pojemnikach, ułożone jeden na drugim. 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. Inaczej wygląda to w przypadku tekstu oznaczonego element wewnętrzny (ang. inline element). Elementy wewnętrzne nie rozpoczynają nowych wierszy, pozostają na swoim miejscu. Rozróżnienie pomiędzy elementami blokowymi a wewnętrznymi jest istotne. W języku (X)HTML to, czy element jest blokowy, czy wewnętrzny, wpływa na to, jakie elementy może zawierać. Nie można na przykład umieścić elementu blokowego wewnątrz elementu wewnętrznego (na przykład akapitu w środku odnośnika). Elementy blokowe oraz wewnętrzne zachowują się również inaczej, jeśli chodzi o stosowanie arkuszy stylów. 10

11 Akapit tekstu oznaczamy znacznikiem <p> (p = paragraph) Każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <p>, które wstawi interlinie między poszczególne fragmenty tekstu, czyli spowoduje przejście do nowego wiersza i odsunięcie rozpoczynającego się akapitu od poprzedniego. <p> tekst danego akapitu </p> Oprócz akapitów istnieje możliwość oznaczenia bloku tekstu (który oczywiście może zawierać kilka akapitów). Blok tekstu oznaczany jest znacznikiem <div>. <div> Tak oznacza się blok tekstu <p> Blok tekstu może zawierać kilka akapitów </p> </div> Zadanie 8. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). Treść wyświetlona na stronie: Elementy puste znaczniki puste Niektóre znaczniki nie mają zawartości tekstowej, ponieważ są one wykorzystywane jako proste instrukcje. O takich elementach mówi się, że są puste (ang. empty). Elementy puste to złamanie wiersza (br), linia pozioma (hr), a także elementy udostępniające informacje o dokumencie, jednak niewpływające na wyświetlaną treść, jak element meta. Składnia elementów pustych rożni się nieco w językach HTML oraz XHTML. W HTML elementy puste nie używają znaczników zamykających oznaczane są pojedynczym znacznikiem (na przykład <br>, <hr>) wstawianym do tekstu. W języku XHTML wszystkie elementy, włącznie z pustymi, muszą zostać zamknięte (zakończone). Elementy puste zamyka się, dodając na ich końcu, tuż przed nawiasem końcowym, ukośnik prawy poprzedzony spacją, jak w <img />, <br /> oraz <hr />. 11

12 Zmiana linii wewnątrz akapitu (przejście do nowego wiersza w ramach tego samego akapitu, czyli bez wstawiania odstępu) stosujemy tu znacznik <br> tekst <br/> nowa linia tekstu <p> W akapicie można wskazywać miejsce - <br />, od którego tekst będzie zaczynać się od nowej linijki </p> Uwaga: Niektóre znaczniki HTML ze swej natury wymuszają przejście do nowego wiersza, a wówczas nie ma potrzeby stosowania dodatkowo znacznika <br>, czy <p>. Są to m.in.: znaczniki nagłówkowe znaczniki list znaczniki tabel niektóre znaczniki formatujące Zadanie 9. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). Treść przedstawiona na stronie: Formatowanie czcionek HTML miał być w zamierzeniach od początku wykorzystywany do nadawania znaczenia oraz struktury dokumentów prezentowanych na stronach WWW, jednak ta misja w początkowych latach istnienia Internetu została nieco wypaczona. Nie mając początkowo do dyspozycji systemu arkuszy stylów, rozszerzano HTML w taki sposób, by autorzy stron mogli zmieniać wygląd czcionek, kolory czy wyrównania. Te dodatki prezentacyjne nadal znajdują się w języku, dlatego można się na nie natknąć, przeglądając źródło dokumentu. 12

13 Najprostsze znaczniki do formatowania czcionek to: <b> tekst wytłuszczony </b> <i> tekst pochylony </i> <u> tekst podkreślony </u> <s> tekst przekreślony </s> Dodatkowo: <strong> tekst silnie wyróżniony (wytłuszczony) </strong> <strike> tekst przekreślony </strike> <blink> tekst migający </blink> <big> tekst powiększony </big> <small> tekst pomniejszony </small> _{tekst obniżony} ^{tekst podwyższony} <center> tekst wyśrodkowany </center> <left> tekst dosunięty do lewej </left> Zadanie 10. Wprowadź znaczniki formatowana tekstu do edytora, zapisz i wyświetl w przeglądarce, aby zobaczyć rezultaty. Zadanie 11. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). 13

14 Zachowanie formatowania kopiowanego tekstu Przeglądarki zwykle ignorują tzw. białe znaki (ang. white space), takie jak np. znaki spacji, znajdujące się w dokumentach źródłowych. W pewnych typach informacji, takich jak przykłady kodu czy utwory poetyckie, białe znaki są jednak istotne dla przekazywania znaczenia. Z tego powodu istnieje element sformatowanego tekstu (pre, od angielskiego preformatted sformatowany). Jest to unikalny element, który umożliwia wyświetlenie tekstu dokładnie w ten sposób, w jaki go wpisano. Tekst przeformatowany zachowuje spacje oraz tabulatory jeżeli zastosujemy znaczniki: <pre> Odpowiednio sformatowany tekst </pre> Zadanie 12. Odszukaj treść wiersza Leopolda Staffa Ogród przedziwny, a następnie stwórz kolejną stronę według wzoru (dla sprawdzenia efektów zapisz i wyświetl w przeglądarce): Centrum Ogrodnicze Rajski Ogród Tytuł (podkreślony) autor (podwyższony) i tekst wiersza (według znalezionego formatowania) 3. Tworzenie list (wykazów) Język HTML obsługuje kilka formatów list, są to: lista numerowana (uporządkowana) lista wypunktowana (nieuporządkowana) lista słownikowa Każdy typ listy jest definiowany innymi znacznikami. Listy numerowane Wykaz uporządkowany służy do sporządzenia wykazu numerowanego, w którym istotna jest dla nas kolejność elementów. List uporządkowanych używamy gdy kolejność elementów ma znaczenie dla treści. Np. spis treści jest uporządkowaną listą elementów. Listę uporządkowaną definiuje się znacznikiem <ol> (ordered list), a poszczególne jej elementy przez <li> (list item). Przykład prostej listy numerowanej: <ol> <li> Punkt pierwszy </li> <li> Punkt drugi </li> <li> Punkt trzeci </li> <li> Punkt czwarty </li> <li> Punkt piąty </li> </ol> Treści stanowiących poszczególne pozycje listy nie należy rozpoczynać od kolejnych liczb, ponieważ zostaną one wyświetlone przez przeglądarkę automatycznie. 14

15 Zadanie 13. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). Istnieje kilka sposobów numerowania list. W celu wybrania odpowiedniego sposobu numerowania stosuje się specjalne atrybuty type dla list <ol>. Atrybuty to instrukcje określające lub modyfikujące element. Składnia atrybutów jest następująca: <element nazwa-atrybutu= wartość > Zawartość </element> lub w przypadku elementów pustych: <element nazwa-atrybutu= wartość /> Argumenty: list-style-type: 1, 2, 3, 4 dziesiętne - decimal (jest to sposób używany standardowo i nie wymaga podawania żadnego atrybutu) 01, 02, 03, 04 dziesiętne z wiodącym zerem- decimal-leading-zero i, ii, iii, iv - liczby rzymskie małe - lower-roman I, II, III, IV - liczby rzymskie duże - upper-roman a, b, c, d litery małe - lower-alpha A, B, C, D - litery duże - upper-alpha wymienienie bez numeracji - none (nothing) Aby zdefiniować typ stylu wykazu, należy wpisać w definicji stylu: "list-style-type: wartość", np.: <ol style="list-style-type: upper-roman (lub inny atrybut)"> Jeżeli zaistnieje konieczność przerwania numerowania listy i wstawienia tekstu nienumerowanego, po czym chcemy kontynuować numerowanie stosujemy argument start. (zamykamy pierwszą listę znacznikiem </ol> wstawiamy tekst nie należący do listy, następnie rozpoczynamy kolejną listę znacznikiem <ol> z atrybutem start=n, gdzie n to liczba, od której wznawiamy numerowanie). Argument start wskazuje od jakiej cyfry/litery zaczynamy wyliczanie: <ol start= 5 (lub inna cyfra) > 15

16 Zadanie 14. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). 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. Należy pamiętać zawsze o stosowaniu znaczników domykających punkty listy, ponieważ nie domknięcie znacznika jest błędem we współcześnie stosowanych standardach webmasterskich. Wyjątkiem od zamykania punktów wykazu w tym samym wierszu jest wprowadzanie zagnieżdżonych wykazów niższego szczebla - zamknięcie punktu następuje po zagnieżdżonym wykazie. W trakcie zagnieżdżania wykazów niższego poziomu zamknięcie punktu wykazu nadrzędnego szczebla następuje za zagnieżdżonym wykazem. Kiedy zagnieżdża się listę nieuporządkowaną wewnątrz innej listy nieuporządkowanej, przeglądarka automatycznie zmienia styl znaku wypunktowania drugiej listy. Niestety, styl numerowania nie jest domyślnie zmieniany, kiedy zagnieżdża się listy uporządkowane. Należy to zrobić samodzielnie w arkuszu stylów. Naturalnie możemy swobodnie manipulować typami stylu wykazu, np. na pierwszym poziomie dać cyfry rzymskie, a na drugim arabskie, na pierwszym cyfry arabskie, a na drugim cyfry arabskie z wiodącym zerem, itd. 16

17 Przykład (złożonej) listy: <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) Zadanie 15. Zmodyfikuj właściwie tekst źródłowy stworzony w poprzednim zadaniu, aby uzyskać następujący efekt: Listy wypunktowane: Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego, w którym kolejne punkty są wyróżniane punktorami. Polecenie <ul> </ul> (od unordered list) tworzy ramy wykazu, natomiast polecenia <li> </li> (od list item element listy )wprowadzają konkretne punkty. Znacznik <ul> 17

18 Argumenty: list-style-type: disc wypełnione koło (jest to sposób używany standardowo i nie wymaga podawania żadnego atrybutu) o circle niewypełnione koło square wypełniony kwadrat Np: <ul style="list-style-type: disc"> 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 </li> <li> Podpunkt </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 </li> </ul> (zamknięcie całej listy) W przypadku listy nienumerowanej również można dowolnie stosować atrybuty dla sposobu wyświetlenia podpunktów na różnych poziomach. Zadanie 16. Przekształć listę z zadania 15. w listę wypunktowaną, tak aby osiągnąć podany poniżej efekt: 18

19 Można również mieszać elementy listy numerowanej i punktowanej. Zadanie 17. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). Definicje: Listy definicji, inaczej listy słownikowe (określane znacznikiem <dl> definition list) zawierają dwa rodzaje elementów termin (<dt> definition term) i jego objaśnienie, opis (<dd> definition description). <dl> </dl> Początek i koniec listy definicji <dt> </dt> Termin <dd>...</dd> Terść definicji <dl> początek listy definicyjnej <dt> pierwszy termin </dt> <dd> wyjaśnienie pierwszego terminu </dd> <dt> drugi termin </dt> <dd> wyjaśnienie drugiego terminu </dd> </dl> koniec listy definicyjnej Element <dl> może zawierać jedynie elementy <dt> oraz <dd>. Można umieścić kilka definicji dla jednego pojęcia oraz odwrotnie. Nie można umieszczać elementów blokowych (takich jak nagłówki 19

20 czy akapity) w pojęciach <dt>, ale w definicjach <dd> już tak mogą się tam znajdować dowolne elementy blokowe oraz wewnętrzne. Zadanie 18. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). Listy definicyjne można również mieszać z listami numerowanymi i nienumerowanymi. Zadanie 19. Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). 20

21 4. Styl strony Style wbudowane (in-line) formatowanie konkretnego elementu w dokumencie HTML a. Stosuje się tu atrybut style w poszczególnym znaczniku HTML (np. <p>, <h1>, <hr/>) np. <selektor style="cecha: wartość; cecha2: wartość2...">...</selektor> Styl wbudowany pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Dlatego właśnie styl tego rodzaju nazywa się także styl inline (ang. "w linii"), ponieważ jest wstawiany w tej samej linii, w której znajduje się element formatowany. O tym, który to będzie element, decyduje słowo kluczowe "selektor". Jest to pierwszy z elementów kaskadowych arkuszy stylów (CSS), które szerzej zostaną omówione później. Linia (oddzielanie) Czasem nie da się właściwie podzielić dokumentu za pomocą nagłówków, a jeśli chce się dodać separator rozdzielający części strony, można wstawić pomiędzy bloki tekstu element linii poziomej <hr/> (od "horizontal rule" - czyli wyliniowanie poziome). Element hr jest elementem pustym, więc po prostu wstawia się go w miejscu, w którym ma się pojawić linia, czyli pozioma kreska ciągnąca się przez całą szerokość okna, w którym została umieszczona. Ponieważ linie poziome są elementami blokowymi, zawsze rozpoczynają się od nowego wiersza, a nad nimi oraz pod nimi znajduje się odstęp. Znacznik <hr/> nie może być umieszczany wewnątrz akapitów. Służy on do ich oddzielania. 1. Znacznik linii poziomej - <hr /> Zadanie 20 Na podstawie przedstawionej przykładowej strony internetowej postaraj się odtworzyć zapis w języku HTML (dla sprawdzenia zapisz i wyświetl w przeglądarce). 21

22 Linii możemy nadać dowolną grubość i kolor: <hr style="height: 5px; color: red"/> Linia może mieć określoną długość w pikselach lub procentach: <hr style="width: 50%"/> height wysokość width - szerokość Wymienione kategorie określające sposób wyświetlenia linii mogą być łączone w jeden znacznik zawierający wszystkie interesujące nas elementy (wstawiamy go w miejscu gdzie chcemy wstawić linię. 2. <hr style="color: green; background-color: green; height: 3px; width: 50%" /> Zadanie 21. Na podstawie strony zmodyfikuj linie z poprzedniego zadania. (zapisz i sprawdź efekt wyświetlając w przeglądarce). 22

23 Kolor czcionki i tła: W podobny sposób możemy zmieniać kolor czcionki oraz tła dokumentu: Znaczniki stosowane w tych przypadkach to: Kolor czcionki w danym akapicie: <p style= color:blue > Kolor tła i tekstu w całym dokumencie: <body style="background-color: beige; color: blue"> Podstawowe kolory stosowane w języku HTML to: 23

24 Zadanie 22. Zmodyfikuj wcześniej stworzoną stronę zgodnie z przykładem poniżej. Zapisz i wyświetl w celu sprawdzenia w przeglądarce. Użycie innych nazw jest błędem i nie gwarantuje interpretacji we wszystkich obecnych i przyszłych przeglądarkach! W zamian należy używać kodów HEX. (szesnastkowych) Każdą barwę można utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony i niebieski (RGB - od angielskich słów: Red - czerwony, Green - zielony, Blue - niebieski). Nasycenie każdego z kolorów zapisujemy w definicji barwy w postaci: #RRGGBB, gdzie: RR - nasycenie koloru czerwonego; GG - nasycenie zielonego; BB - nasycenie niebieskiego (znak # oznacza, że definiujemy kolor w kodzie HEX). Wszystkie składowe muszą być podane w systemie szesnastkowym i poprzedzone znakiem #. Im większa liczba, tym jaśniejszy kolor. Liczba musi się składać z sześciu cyfr, nawet jeśli są to same zera! Przypominam, że w systemie szesnastkowym (HEX) jest szesnaście podstawowych cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Aby w prostszy sposób ustalić właściwy numer określający specyfikację koloru możemy skorzystać ze specjalnych programów lub stron internetowych, gdzie mamy wgląd w wygląd koloru, a system podaje nam odpowiednią kombinacje w kodzie HEX, np. 24

25 Zadanie 23. Na podanej stronie stwórz własne kolory z odpowiednim zapisem w kodzie szesnastkowym i dowolnie zmodyfikuj wcześniej stworzoną stronę internetową (zapisz i wyświetl w przeglądarce w celu sprawdzenia wyników). Znaki specjalne: Znaki specjalne są często używane aby wstawić do dokumentu HTML znaki, których normalnie nie można użyć (ponieważ używany zestaw znaków, np. ISO , na to nie pozwala), lub też dany znak jest trudny do wpisania (tzn. nie ma go na klawiaturze). Obecnie ze względu na możliwość zastosowania standardu kodowania znaków UTF-8 (lub innego opartego na Unicode) pierwszy argument stracił znacznie na aktualności, ale drugi nadaj jest aktualny. W dokumencie źródłowym w ich miejsce stosuje się tak zwane znaki ucieczki (ang. escape characters). Oznacza to, że zamiast wpisywać sam znak, zastępuje się go liczbowym lub nazwanym odniesieniem do znaku. Kiedy przeglądarka napotyka odniesienie do znaku, zastępuje je prawdziwym znakiem, w czasie gdy strona jest wyświetlana. Istnieją dwie możliwości odniesienia się do określonego znaku: za pomocą przypisanej mu wartości numerycznej (encji liczbowej) albo za pomocą zdefiniowanej skróconej nazwy tego znaku (nazywanej encją znakową). Wszystkie odniesienia do znaków rozpoczynają się od znaku & i kończą się średnikiem (;). Każdy znak specjalny musi rozpoczynać się od znaku ampersand "&", i kończyć znakiem średnika ";". Warto także wiedzieć że znaki specjalne HTML mogą zostać napisane na jeden z trzech sposobów: poprzez podanie nazwy znaku, np: & poprzez podanie kodu dziesiętnego znaku poprzedzonego znakiem "#", np: & poprzez podanie kodu szestnastkowego znaku poprzedzonego znakami "#x", np: & W poniższej tabeli znajdziesz wszystkie znaki specjalne które są najczęściej używane: Symbol Nazwa encji Numer encji & &amp &#38 < &lt &#60 > &gt &#62 Spacja nierozdzielająca &nbsp &#160 Cent &cent &#162 Funt &pound &#163 Yen &yen &#165 &copy &#169 &reg &#174 &deg &#176 ± &plusmn &#177 &dagger &#8224 &trade &#

26 Jeśli chce się zobaczyć wszystkie, pełna lista odniesień do znaków została opublikowana w Internecie Zadanie 24. Na podstawie poniższej przykładowej strony internetowej zmodyfikuj wcześniej stworzoną przez Ciebie stronę wykorzystując właściwe znaki specjalne. Zapisz i sprawdź wyniki w przeglądarce. 1. Odsyłacze i odnośniki Odnośniki Odnośniki stosujemy głównie gdy chcemy się powołać na źródło, np. w cytatach. W cytatach stosujemy znaczniki: <q>...</q> - krótki cytat (od angielskiego quotation cytat) Zgodnie z rekomendacją HTML 4.01 przeglądarki zwykle automatycznie ujmują tekst tego znacznika w znaki cudzysłowu, dlatego nie należy wstawiać dodatkowych cudzysłowów ręcznie w dokumencie źródłowym. Wewnątrz tego znacznika umieszcza się treść krótkich cytatów, które nie zawierają żadnych akapitów, np.: Matthew Carter mówi: <q>nasz alfabet od wieków się nie zmienił.</q> 26

27 <blockquote>...</blockquote> - blok cytowany Jeśli powołujemy się na jakieś źródła, np. umieszczamy na stronie długi cytat, referencję czy fragment pochodzący z innego źródła, szczególnie gdy rozciąga się on na cztery wiersze lub więcej, można oznaczyć go za pomocą elementu <blockquote>. Każdy wiersz w bloku cytowanym rozpoczyna się zwykle tabulatorem (wcięciem). Zaleca się, by treść znajdująca się wewnątrz takich cytatów blokowych została ujęta w inne elementy, na przykład akapity, nagłówki czy listy, jak w poniższym przykładzie: <p>sławny projektant czcionek Matthew Carter mówi o swojej profesji:</p> <blockquote> <p>nasz alfabet od wieków się nie zmienił. Projektant niewiele może zrobić z poszczególnymi literami.</p> <p>podobnie jest z utworem z dziedziny muzyki klasycznej. Partytura jest rozpisana niewiele można z tym zrobić jednak każdy dyrygent interpretuje ją w odmienny sposób. W interpretacji drzemie siła.</p> </blockquote> <cite>...</cite> - odwołanie, odniesienie do źródła Element <cite> wykorzystywany jest do identyfikowania odniesienia do innego dokumentu, takiego jak książka (tytuł, imię i nazwisko autora), magazyn, artykuł i tym podobne. Można w nim więc umieścić np. imię i nazwisko autora, którego cytujemy (ale nie sam cytat!) albo tytuł książki, do której się odnosimy. Odwołania zazwyczaj wyświetlane są jako kursywa. Przykład: <p> Fragmenty niniejszego artykułu zostały napisane na podstawie książki <cite> Kompletny przewodnik po typografii </cite>, której autorem jest James Felici.</p> Możemy wstawić w bloku cytowanym informację ze źródłem cytowanego tekstu, jest to przydatne w sytuacji aktualizacji danych na stronie przez kilku administratorów. <blockquote cite= adres źródła ><p>..</p> </blockquote> np. <blockquote cite=" "><p>..</p> </blockquote> Zadanie 25. Na podstawie przedstawionej poniżej przykładowej strony spróbuj odtworzyć zapis w języku HTML, aby uzyskać zbliżony efekt (dopisz do ćwiczenia ze skopiowaną treścią wiersza) Zapisz i wyświetl w przeglądarce w celu sprawdzenia. 27

28 Odsyłacze (linki od links - łączniki) Praktycznie na każdej stronie WWW spotyka się odsyłacze. Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Przy czym strona taka może wchodzić w skład tego samego serwisu, ale równie dobrze może znajdować się na drugim końcu świata. Przeglądarki internetowe wyświetlają odsyłacze najczęściej w innym kolorze oraz podkreślają je, w ten sposób są one lepiej widoczne i odróżniają się od zwykłego tekstu. Do tworzenia odnośnika używa się znacznika <a> i </a> (od anchor zakotwiczenie) jest to znacznik kotwicy, czyli łącza hipertekstowego. Jest to atrybut (znacznik) łącza sprawiający, ze tekst ujęty w ten znacznik będzie wyróżniony od pozostałego tekstu na stronie (np. kolorem niebieskim) i stanie się łączem hipertekstowym. Podstawowym atrybutem znacznika <a> służącym do wskazania miejsca docelowego jest href (hypertext reference odwołanie hipertekstowe) służący do wskazania adresu URL (wprowadzany w... ), pod który mamy zostać przeniesieni: <a href=... > tekst, po kliknięciu na który następuje odesłanie w inne miejsce </a> Istnieją dwa sposoby podawania adresu URL: 1. Bezwzględny adres URL zawiera pełny adres dokumentu wraz z protokołem ( nazwą domeny oraz właściwą nazwą ścieżki. Kiedy wskazuje się dokumenty znajdujące się w Internecie, należy korzystać z tej formy. Przykład: href= 28

29 2. Względny adres URL opisuje ścieżkę do pliku względem bieżącego dokumentu. Nie wymaga podawania nazwy protokołu ani domeny wystarczy sama ścieżka. Względne adresy URL mogą być wykorzystywane wtedy, gdy tworzy się odnośnik do dokumentu znajdującego się na naszej własnej stronie (to znaczy na naszym serwerze). Przykład: href= recipes/index.html Ważne: Ponieważ kotwice są elementami wewnętrznymi, mogą one zawierać jedynie inne elementy wewnętrzne lub tekst. Nie można pomiędzy znacznikami tego elementu umieścić akapitu, nagłówka lub innego elementu blokowego. 1. Linki do zewnętrznych stron (znajdujących się w Internecie) Umożliwiają zamieszczanie na stronie odsyłaczy (linków) dowolnych stron istniejących w Internecie. <a href="adres_url"> Widoczny tekst odsyłacza </a> Zadanie 26. Według poniższego przykłady strony internetowej stwórz link do strony umożliwiającej pobranie programu do otwierania dokumentów w MS Word. Odtworzoną z przykładu stronę zapisz i wyświetl w przeglądarce w celu sprawdzenia wyników. Adres strony w Internecie to: 29

30 Nowe okno Żeby otworzyć nowe okno za pomocą kodu (X)HTML, należy skorzystać z atrybutu target elementu kotwicy (<a>) w celu przekazania przeglądarce nazwy okna, w którym chce się otworzyć dokument z odnośnika. Należy ustawić wartość tego atrybutu na _blank lub na wybraną nazwę. W tej metodzie nie ma się kontroli nad wielkością otwieranego nowego okna, powinno ono jednak mieć taki sam rozmiar jak ostatnie otwarte okno w przeglądarce użytkownika. Jeśli chcemy, aby po kliknięciu odsyłacza otworzyło się nowe okno, należy wpisać następujący kod: <a href="adres_url target= _blank"> Widoczny tekst odsyłacza </a> Ustawienie target= _blank zawsze sprawia, że przeglądarka otwiera zupełnie nowe okno. Otwieranie nowych okien przeglądarki jest problematyczne z punktu widzenia dostępności. Nowe okna mogą być mylące dla niektórych użytkowników, szczególnie tych, którzy oglądają stronę ze pomocą czytnika ekranu lub innego narzędzia pomocniczego. Może to także być traktowane przez użytkowników jako złośliwość, a nie wygoda, szczególnie teraz, gdy jesteśmy bombardowani reklamami w wyskakujących oknach. Poza tym ponieważ użytkownicy często konfigurują swoje przeglądarki w ten sposób, by blokowały one wyskakujące okna, ryzykuje się tym, że zawartość nowego okna w ogóle nie dotrze do odwiedzających stronę. Zadanie 27. Przekształć odsyłacz z poprzedniego zadania, w ten sposób aby po kliknięciu strona docelowa, do której następuje przeniesienie, otwierała się w nowym oknie. 2. Linki do dokumentów na dysku lokalnym Oprócz linków do innych stron internetowych, które już istnieją w Internecie możemy tworzyć odnośniki do innych (naszych) stron, które mają zostać wzajemnie połączone. Odwołania do materiałów w tym samym folderze Najbardziej oczywistym względnym adresem URL, jaki można napisać, jest odnośnik do innego pliku z tego samego katalogu. Kiedy tworzy się taki odnośnik, wystarczy podać nazwę pliku. Jeśli adres URL jest samodzielną nazwą pliku, serwer szuka tego pliku w katalogu bieżącym (czyli katalogu zawierającym dokument (X)HTML, w którym znajduje się odnośnik). Jeżeli mamy drugi dokument zapisany w tym samym folderze stosujemy znacznik: <a href="nazwa_pliku.html"> Widoczny tekst odsyłacza </a> Bardzo ważne: w nazwach plików lepiej nie używać: wielkich liter znaków, np.: \ / : *? " < > spacji (jeśli musisz, w zamian używaj podkreślnika "_") polskich liter (ą, ć, ę, ł, ń... itd.) nie należy rozpoczynać od file://. - to wskazuje, że plik jest lokalny i sprawia, że odnośnik przestanie działać, kiedy strona znajdzie się na serwerze. 30

31 Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Zadanie 28. Do poprzedniego zadania dodaj kolejny odsyłacz przekierowujący do podstrony z diagnozowaniem liści, tak jak to widać w załączonym przykładzie. Zapisz i sprawdź wyniki w przeglądarce (możesz zastosować dowolnie otwieranie w tym samym oknie lub w nowym oknie w drugim przypadku rozszerz znacznik o atrybut <a target="_blank" href > ) Jeżeli plik z dokumentem, do którego ma zostać dokonane przekierowanie jest zapisany w innym folderze (katalogu dyskowym) należy atrybut <a href > uzupełnić o ścieżkę dostępu do tego dokumentu. Gdy dokument docelowy znajduje się w podfolderze <a href="nazwa_podfoldera/nazwa_pliku.html"> Widoczny tekst odsyłacza </a> W sytuacji gdyby była konieczność zejścia jeszcze o kolejne poziomy niżej to katalogi rozdziela się znakami ukośnika prawego (/). Element kotwicy dla takiego pliku mówi przeglądarce: W bieżącym katalogu odszukaj podkatalog o danej nazwie. Tam znajdziesz kolejny podkatalog o kolejnej nazwie, a w nim interesujący mnie plik html. Zawsze rozpoczyna się od nazwy katalogu znajdującego się w tej samej lokalizacji co plik bieżący i po każdej kolejnej nazwie katalogu umieszcza się znak ukośnika prawego dopóki nie dotrze się do pliku z odnośnika. 31

32 Gdy dokument docelowy znajduje się w nadrzędnym folderze <a href="../nazwa_pliku.html"> Widoczny tekst odsyłacza </a> W systemach Unix istnieje konwencja zapisu ścieżek do plików służąca właśnie do tego, zwana kropka-kropka-ukośnik (w oryginale dot-dot-slash ), czyli../. Kiedy rozpoczyna się ścieżkę do pliku od znaków../, jest to równoważne z nakazaniem przeglądarce, by wróciła o jeden poziom do góry w hierarchii katalogów, a dalej postępowała zgodnie z resztą ścieżki do pliku. Nie trzeba podawać nazwy katalogu znajdującego się na wyższym poziomie w ścieżce do pliku, ponieważ znaki../ ją zastępują. W celu przejścia o dwa poziomy w gorę hierarchii katalogów wystarczy dwukrotnie użyć zapisu kropka-kropka-ukośnik <a href="../../nazwa_pliku.html"> Widoczny tekst odsyłacza </a> Gdy dokument jest zapisany w dowolnym miejscu względem katalogu głównego Każda strona internetowa ma katalog główny, czyli zawierający wszystkie katalogi oraz pliki tej strony. Dotychczas wszystkie zaprezentowane ścieżki do plików były określane względem dokumentu zawierającego odnośnik. Innym sposobem zapisania ścieżki jest rozpoczęcie od katalogu głównego i wymienienie listy nazw podkatalogów aż do pliku, do którego prowadzić ma odnośnik. <a href= /nazwa _katalogu/nazwa_pliku.html> Widoczny tekst odsyłacza </a> Zgodnie z konwencją zapisu z Uniksa do katalogu głównego odnosi się za pomocą znaku ukośnika prawego (/) znajdującego się na początku ścieżki do pliku. Poniższa ścieżka określona względem katalogu głównego mówi: Przejdź do katalogu głównego strony, następnie otwórz katalog o określonej nazwie, a znajdziesz w nim plik html. Nie jest konieczne podawanie nazwy katalogu głównego w adresie URL zastępuje ją znak ukośnika prawego (/), który kieruje przeglądarkę do najwyższego poziomu w hierarchii katalogów strony. Stąd wystarczy tylko podać katalogi, w których przeglądarka ma szukać pliku. Ponieważ ścieżka do pliku w odnośniku rozpoczyna się od katalogu głównego, będzie działała z każdego dokumentu na serwerze bez względu na to, w jakim podkatalogu się on znajduje. Odnośniki tego typu przydają się w sytuacji, gdy określona treść może nie zawsze znajdować się w tym samym katalogu lub w przypadku materiałów generowanych dynamicznie. W ten sposób łatwo jest również kopiować i wklejać odnośniki między rożnymi dokumentami. Minus jest jednak taki, że takie odnośniki nie będą działały na komputerze lokalnym, gdyż będą określane względem twardego dysku. By sprawdzić, czy odnośniki działają poprawnie, trzeba będzie poczekać do umieszczenia strony na serwerze. Zadanie 29. Przetestuj powyższe odsyłacze umieszczając plik z podstroną diagnozowanie liści w podfolferze o nazwie artykuły. Spróbuj również zapisać ścieżkę odsyłacza rozpoczynając od katalogu głównego (mimo, że nie będzie działało hiperłącze przed wrzuceniem strony na serwer). 32

33 3. Link do określonych miejsc w dokumencie (etykiety) Można również utworzyć odnośnik do określonego miejsca na stronie. Przydaje się to jako skrót do informacji znajdującej się na samym dole bardzo długiej, przewijanej strony albo do szybkiego powrotu na gorę strony za jednym kliknięciem. Czasami odnośniki do określonych punktów strony określa się mianem odnośników do fragmentu dokumentu. Tworzenie odnośnika do miejsca znajdującego się na tej samej stronie jest procesem składającym się z dwóch etapów. Najpierw należy zidentyfikować miejsce docelowe, a następnie utworzyć do niego odnośnik. Dzięki stosowaniu znaczników miejsc docelowych dla tzw. etykiet, nawigacja w serwisie staje się dużo łatwiejsza. Po kliknięciu odsyłacza do etykiety, przeglądarka internetowa przenosi użytkownika bezpośrednio do podrozdziału, a nie na początek strony, przez co nie jest on zmuszony do samodzielnego odszukania wybranego tematu (co w przypadku obszernych dokumentów mogłoby długo potrwać). Etykietę można zdefiniować w dowolnym miejscu strony Etykieta - inaczej zakładka lub kotwica - to pewne zaznaczone miejsce na stronie. Jeśli zdefiniujemy taką zakładkę, będziemy mogli się później do niej bezpośrednio przenosić. Etykiety są wykorzystywane, gdy w jednym dokumencie znajduje się więcej ważnych miejsc - podrozdziałów, a wstawienie ich do osobnych plików, byłoby uciążliwe, ze względu na ich liczbę. Krok 1. Nazwanie miejsca docelowego Żeby utworzyć miejsce docelowe, należy wykorzystać atrybut id do nadania elementowi docelowemu unikalnej nazwy (unikalnej w tym sensie, że w dokumencie może wystąpić raz, a nie w znaczeniu wyjątkowo fajnej i interesującej). Jeśli chcemy używać etykietę, najpierw należy ją zdefiniować w wybranym miejscu strony za pomocą polecenia: <znacznik id= nazwa_etykiety > Widoczny tekst etykiety </znacznik> np. etykieta jest podpięta do nagłówków: <h2 id= nazwa_etykiety >H</h2> Dawnym sposobem identyfikowania miejsca docelowego w dokumencie było umieszczanie w nim nazwanej kotwicy. Nazwana kotwica to element a wykorzystujący atrybut name do udostępnienia unikalnego identyfikatora w miejsce atrybutu href, na przykład: <h2><a name="nazwa_etykiety"> H </a></ h2> Nazwane kotwice nie są podkreślane, kiedy strona wyświetlana jest w przeglądarce. Atrybut name nie jest już w XHTML wykorzystywany w połączeniu z elementem a, dlatego zaleca się identyfikowanie samego elementu za pomocą atrybutu id. Krok 2. Utworzenie odnośnika do miejsca docelowego Kiedy identyfikator jest gotowy, następnie możemy się do niej odwoływać, zarówno z tej samej, jak i z innej strony, za pomocą zwykłych odsyłaczy. Tak jak w przypadku każdego odnośnika, element a wraz z atrybutem href wykorzystano do określania lokalizacji odnośnika. Żeby wskazać, że odnośnik kieruje do fragmentu strony, należy użyć symbolu krzyżyka (#) przed nazwą tego fragmentu określoną za pomocą elementu id: <a href="#nazwa_etykiety"> Widoczny tekst odsyłacza </a> 33

34 Istnieją dwa rodzaje odsyłaczy do etykiet: 1. Etykieta zdefiniowana na tej samej stronie <h2 id="#nazwa_etykiety > Widoczny tekst etykiety </h2> (...) jakiś tekst na stronie oddzielający link od miejsca, do którego chcemy się przenieść <a href="#nazwa_etykiety"> Widoczny tekst odsyłacza </a> 2. Etykieta zdefiniowana na innej stronie Na stronie, do której ma nastąpić przeniesienie w odpowiednim miejscu umieszczamy etykietę <h2 id="nazwa_etykiety"> Widoczny tekst etykiety </h2> Na stronie gdzie mamy link umieszczamy odsyłacz: <a href="ścieżka dostępu lub adres internetowy#nazwa_etykiety">widoczny tekst odsyłacza </a> Zadanie 30. a) Stwórz kolejną podstronę w języku HTML według podanego przykładu (wykorzystaj tekst podany w dodatkowym dokumencie Word, aby zaoszczędzić czas na przepisywanie ręczne): 34

35 b) W obrębie tej strony dodaj odsyłacze wykorzystując listę umieszczoną na górze strony i nagłówki nad poszczególnymi akapitami. c) Wstaw odsyłacze na stronie głównej z listą Najnowsze artykuły (wykorzystywana wcześniej na tych ćwiczeniach, aby na niej wygląd zmienił się tak jak na przykładzie poniżej) do poszczególnych akapitów na stworzonej w tym zadaniu stronie 35

36 d) Wstaw odsyłacz do całej strony stworzonej w tym zadaniu (podlinkuj na liście Najnowsze artykuły podpunkt Wersja HTML ) e) W ten sam sposób podlinkuj podstronę ze słowniczkiem (zadanie z poprzednich zajęć, gdzie była tworzona lista definicyjna) f) Zapisz dokument w Wordzie z tekstem wykorzystanym do strony stworzonej w tym zadaniu w swoim folderze na komputerze, a następnie podlinkuj go korzystając z podpunktu Dokument Microsoft Word znajdujący się na stronie z lista Najnowsze artykuły. 36

37 4. Odsyłacze pocztowe. Dość często spotykanym odsyłaczem na stronach WWW jest konstrukcja umożliwiająca czytelnikowi strony wysłać pocztę elektroniczną do jakiejś osoby (np. autora). Po kliknięciu takiego odnośnika, list oczywiście nie zostanie wysłany natychmiastowo, lecz nastąpi otwarcie domyślnego programu pocztowego użytkownika (np. Outlook Express), w którym będzie on mógł wpisać treść listu, a potem go wysłać do wskazanego adresata, którego pojawi się automatycznie. Konstrukcja takiego odsyłacza wygląda następująco: <a href="mailto:adres "> Tekst odsyłacza </a> np. <a href=mailto:3rok.infotmatyka@gmail.com> Wyślij do mnie a (czy inny tekst odsyłacza) </a> W miejscu wyświetlenia komunikatu można umieścić adres , by był widoczny bezpośrednio na ekranie przeglądarki, np.: <a href=mailto:3rok.infotmatyka@gmail.com> 3rok.infotmatyka@gmail.com </a> Zadanie 31. Do stworzonej strony z listą Najnowsze artykuły dodaj kontakt z administratorem strony, aby uzyskać poniżej przedstawiony efekt (jako adres mailowy podaj: 3rok.informatyka@gmail.com) 37