Rozdział 1. Informacje podstawowe Rozdział 2. Internet, strona WWW i znaczniki HTML... 11

Wielkość: px
Rozpocząć pokaz od strony:

Download "Rozdział 1. Informacje podstawowe... 4. Rozdział 2. Internet, strona WWW i znaczniki HTML... 11"

Transkrypt

1 Wstęp 2 Rozdział 1. Informacje podstawowe... 4 Rozdział 2. Internet, strona WWW i znaczniki HTML Rozdział 3. Znaczniki HTML formatujące tekst i nadające strukturę dokumentowi HTML 19 Rozdział 4. Kaskadowe arkusze stylów Rozdział 5. Obrazy w dokumencie HTML Rozdział 6. Połączenia Rozdział 7. Tabele HTML Rozdział 8. Ramki i układy ramek Rozdział 9. HTML a XHTML Dodatek A. Znaczniki HTML i ich funkcje Dodatek B. Podstawowe moduły kodu HTML Dodatek C. Atrybuty standardowe Dodatek D. Kolory w HTML

2 Wstęp HTML to język hipertekstowego znakowania (Hypertext Markup Language), który stanowi ustanowioną przez konsorcjum World Wide Web Consortium (W3C) specyfikację nakreślającą postać dokumentów prezentowanych w Internecie. Twórcą języka HTML jest Tim Berners-Lee. HTML pozwala publikować w Internecie dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia, formularze, pobierać za pośrednictwem połączeń hipertekstowych informacje z Internetu, projektować formularze oraz umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje. Niewątpliwie jest to język prezentacji XXI wieku. Nie można się po prostu bez niego obejść! Książka poświęcona jest podstawom języka HTML. Jest w niej ABC tworzenia dokumentów HTML. Obok wyjaśnień podstawowych terminów, znajdziesz tu także praktyczne wprowadzenie w świat języka HTML. Poszczególne zagadnienia ilustrowane są zestawem prostych przykładów. Przechodząc od przykładu do przykładu nawet nie zauważysz, kiedy przestałeś być nowicjuszem i zacząłeś świadomie i z wyczuciem posługiwać się tym narzędziem. Co będzie Ci potrzebne do pracy? Komputer to oczywiste, przeglądarka na przykład Internet Explorer lub Netscape Navigator (lub inna, najlepiej jednak graficzna, czyli taka, która obsługuje obrazy) i edytor tekstu wystarczy nam prosty edytor typu Notepad lub Wordpad, polecam jednak bezpłatny edytor Webber, który ma tę zaletę, że udostępnia numerację wierszy. Edytor ten znajdziesz na stronie WWW Radka Sokoła Książka napisana została w konwencji pytań i odpowiedzi, a zagadnienia zostały podzielone na 9 rozdziałów. Rozdział 1. zawiera informacje podstawowe. Z rozdziału 2. dowiesz się czym jest Internet, strona WWW i znaczniki HTML. Rozdział 3. poświęcony jest znacznikom HTML formatującym tekst i nadającym strukturę dokumentowi HTML. W rozdziale 4. znajdziesz dość obszerne omówienia kaskadowych arkuszy stylów. Specyfikacja HTML 4.01, a do niej chcemy się dostosować, kładzie wielki nacisk na to, aby niemal wszystko, co dotyczy stylów, definiowane było za pomocą arkuszy CSS. Z tego względy w książce ani razu nie pojawił się tak popularny znacznik <font>. To prawda, że przyzwyczajenie jest drugą naturą, więc zacznijmy się przyzwyczajać do stylów CSS, tym bardziej, że ich stosowanie nie jest trudne, a bardzo ułatwia życie. Rozdział 5. pokazuje różne sposoby korzystania z obrazów w dokumentach HTML, rozdział 6. zajmuje się połączeniami, także tymi nietypowymi, na bazie obrazu ikonami, które można klikać, i mapami odnośników. W rozdziale 7. pojawiają się tabele HTML. Tabele to nie tylko sposób prezentacji danych, lecz także sposób na prezentację dokumentu (choć CSS też tu sięga!). W rozdziale 8. dominują ramki i układy ramek. Ważny jest także rozdział 9., który wskazuje różnice między obecnie najbardziej popularną wersją języka HTML, a nową specyfikacją, XHTML. Warto przeczytać ten 2

3 rozdział, bowiem stosowanie się do zasad obowiązujących przy tworzeniu dokumentów XHTML pomoże tworzyć poprawne dokumenty HTML. Każdy z rozdziałów zawiera krótkie podsumowanie, w którym zebrane zostały najważniejsze informacje, warte przypomnienia od czasu do czasu. Do książki dołączone zostały cztery dodatki. Dodatek A to obszerny zestaw znaczników i ich atrybutów (wg. specyfikacji HTML 4.01). Znajdziesz w nim także podstawowe zasady korzystania z tych elementów. Mam nadzieję, że będzie to użyteczna ściągawka. Dodatek B to podstawowe moduły kodu HTML. Nie musisz więc kartkować całej książki, aby na przykład dowiedzieć się, jak zapisać kod HTML tabeli! Dodatek C prezentuje tabele atrybutów standardowych, które mogą być stosowane niemal ze wszystkimi znacznikami, a w dodatku D znajdziesz tabelkę kodów i nazw podstawowych kolorów. 3

4 Rozdział 1. Informacje podstawowe Książka poświęcona jest podstawom języka HTML HyperText Mark-up Language. Utworzą one solidny fundament, który pozwoli Ci budować nawet skomplikowane strony WWW. Jeśli absolutnie nie masz pojęcia o znacznikach i wyrażeniach przez nie tworzonych, tutaj dowiesz się tego wszystkiego, co w niezbędne. Zaawansowani twórcy stron WWW także powinni znaleźć w książce swego pomocnika omawia ona bowiem poszczególne znaczniki (a pamięć bywa zawodna!) oraz prezentuje szereg przydatnych przykładów ich zastosowania. Zacznijmy od A Co będzie Ci potrzebne? Komputer to oczywiste. Przeglądarka na przykład Internet Explorer lub Netscape Navigator (lub inna, najlepiej jednak graficzna, czyli taka, która obsługuje obrazy). Edytor plików tekstowych wystarczy nam prosty edytor typu Notepad lub Wordpad, polecam jednak bezpłatny edytor Webber, który ma tę zaletę, że udostępnia numerację wierszy (a jak się przekonasz, jest to rzecz niezwykle przydatna) oraz automatycznie dokonuje konwersji kodów polskich znaków diakrytycznych ze standardu Windows na standard używany w Internecie. Edytor ten znajdziesz na stronie WWW Radka Sokoła Brak podłączenia do Internetu, w żaden sposób nie ogranicza Twoich możliwości tworzenia kodu HTML. Fazy pisania i wstępnego testowania kodu można przeprowadzać bez łączenia się z Internetem. Czy HTML to język programowania? HTML HyperText Mark-up Language nie jest językiem programowania, takim jak C++ czy Pascal. A czym jest? 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. 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ługujesz, 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. Format znacznika jest następujący: <ZNACZNIK>To jest zawartość</znacznik> (jest parę wyjątków, na przykład przy wstawianiu obrazu niezbędny jest tylko znacznik otwierający). 4

5 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 korzystasz. Co HTML umożliwia? HTML pozwala: Jak HTML działa? 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. 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. Od historii do teraźniejszości Kto zaczął i gdzie to zmierza? Twórcą języka HTML jest Tim Berners-Lee. Język pomyślany jako narzędzie ułatwiające komunikowanie się naukowców w sieci szybko zyskał ogromną popularność. Przyniósł ją w latach 90-tych szalony rozwój Internetu. Wraz z rozwojem sieci globalnej zmieniał się też sam język. W 1995 roku zatwierdzono specyfikację HTML 2, natomiast specyfikacja HTML 3, także z tego roku, nie doczekała się rekomendacji. W 1996 roku powstała specyfikacja HTML 3.2, która uzyskała rekomendację w 1997 roku. W kolejnych specyfikacjach wprowadzano zmiany, których zadaniem było poprawić przenośność dokumentów HTML między różnymi platformami i przeglądarkami. Zdano sobie bowiem sprawę, że jedynie pełna kompatybilność zagwarantuje prawidłowy rozwój Internetu, a jej brak będzie oznaczał lawinę formatów, która utrudni lub wręcz uniemożliwi powszechne wykorzystanie sieci. Wprowadzane modyfikacje rozszerzały potencjał języka nie naruszając jego dotychczasowych możliwości. Chodziło o to, aby już utworzone strony były nadal dostępne. Inne ważne kwestie, które zadecydowały o kierunku rozwoju to potrzeba umożliwienia korzystania z informacji sieciowych za pomocą różnych urządzeń, takich jak telefony komórkowe czy komputerowe urządzenia służące do komunikacji głosowej, oraz uniezależnienia się od konfiguracji sprzętowej (a więc na przykład od ustawień takich jak rozdzielczość czy głębokość barw) i parametrów łączy sieciowych. 5

6 Wersja 4 (z 1998 r.) rozszerzyła możliwości języka HTML o arkusze stylów, skrypty, ramki i osadzanie obiektów. Poprawiono obsługę tekstu, rozbudowano opcje tabel i formularzy wprowadzając ułatwienia dla osób niepełnosprawnych. W wersji 4.01, wprowadzonej w 1999 roku, poprawiono błędy i wprowadzono drobne zmiany. Kto dba o standaryzację? Definiowaniem standardu języka HTML zajmuje się World Wide Web Consortium (W3C). Konsorcjum W3C utworzone zostało w 1994 roku przez 500 organizacji. Dba ono o rozwój technologii, wyznacza kierunki rozwoju, tworzy i zatwierdza specyfikacje, udostępnia oprogramowanie i narzędzia, a wszystko to w celu wyzwolenia pełnych możliwości Internetu jako forum wymiany informacji i usług oraz centrum komunikacji między ludźmi. Czy W3C przewiduje opublikowanie kolejnej specyfikacji, HTML 5.0? I tak, i nie. Na początku 2000 roku pojawiła się specyfikacja XHTML 1.0 (exxtensible Hypertext Mark-up Language) oznacza się ją także jako xhtml, Xhtml, XML/HTML lub właśnie jako HTML 5.0. XHTML, wyznaczony na oficjalnego następcę języka HTML 4.0, to hybryda językowa wyrastająca z języka XML, posiadająca jednocześnie wiele cech wspólnych z językiem HTML. A co to takiego ten XML? XML extensible MarkUp Language to rodzina technologii, służąca do definiowania formatu i struktury dokumentów. Stanowi ona uproszczoną wersję języka SGML, a dokładniej jego podzbiór. No tak, z deszczu pod rynnę. Wyjaśnijmy sobie więc najpierw skrót SGML. SGML Standard Generalized MarkUp Language, to przemysłowy standard obróbki dokumentów elektronicznych zgodny z ISO Jest on nadrzędny zarówno w stosunku do XML, jak i języka HTML. Oba te języki mają swoje miejsce pod ogromnym parasolem SGML XML jest aplikacją SGML, a XHTML aplikacją XML. Za pomocą znaczników oraz deklaracji typu dokumentów aplikacje te ustalają jednolite formatowanie danych uwzględniające ich specyfikę i zakres zastosowań. Sam SGML nie zawiera natomiast żadnych instrukcji formatujących. Dokumenty SGML przechowywane są w plikach tekstowych. Więcej informacji na temat języka XHTML znajdziesz w rozdziale 9. Definicja typu dokumentu, DTD Co to jest DTD? 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. 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. 6

7 Szczególnym przypadkiem DTD jest język HTML. Odbiornikiem definicji jest tutaj przeglądarka internetowa, którą zaprojektowano pod kątem pobierania i analizy dokumentów tekstowych sformatowanych przy pomocy znaczników i zasad określonych w specyfikacji HTML. Definicja typu dokumentu może znajdować się w pliku dokumentu lub w pliku zewnętrznym, wskazanym przez adres URL. Takie zewnętrzne pliki DTD mogą być używane przez różne dokumenty i różne strony WWW. Oto przykład odwołania do definicji typu dokumentu umieszczonego w obrębie dokumentu HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <html> <head>... </head> <body>... </body> </html> " Zapisywanie dokumentów HTML w edytorze i otwieranie w przeglądarce Jakie edytory? Zanim przystąpimy do tworzenia kodu HTML na serio, kilka uwag na temat korzystania z edytorów, w których kod HTML będzie wprowadzany. Pamiętaj, że dokument HTML jest dokumentem tekstowym. Zapisując go, musisz wziąć to pod uwagę. Nazwa dokumentu składa się z dwóch członów nazwa.rozszerzenie. Zdefiniuj więc dowolną nazwę i dodaj do niej rozszerzenie. W przypadku dokumentów HTML rozszerzenie ma postać.htm lub.html (bardziej pewne jest to właśnie). Zapisując dokument w edytorach takich jak NotePad czy WordPad, w których format tekstowy jest jedynym formatem, musisz rozszerzenie wpisać ręcznie. W edytorze Webber format HTML jest formatem domyślnym, nie musisz więc pamiętać o rozszerzeniu. Jeśli chcesz korzystać z edytora Word, możesz, lecz musisz pamiętać, by w oknie dialogowym Zapisz jako (Save As) wybierać z listy Zapisz jako Typ (Save As Type) typ (*.html) (patrz rysunek 1.1). Jeśli pozostawisz format domyślny (*.doc), Word zapisze znacznie więcej, niż sam tekst na stronie. Zapisze też ustawienia marginesów, tabulatorów, czcionki i całą masę innych ustawień formatowania potrzebnych do poprawnego wyświetlenia strony, lecz absolutnie niepotrzebnych w kodzie HTML. Na wszelki wypadek nie przyzwyczajaj się zbytnio do edytora Word jako narzędzia tworzenia stron WWW każda rzecz wymaga odpowiednich narzędzi. 7

8 Rys Zapisywa nie dokument u HTML w Notatniku tutaj musisz ręcznie wpisać rozszerze nie nazwy.html, Webberze domyślnie edytor przyjmuje rozszerze nie.html, i w edytorze Word w tym przypadk u format pliku trzeba wybrać z listy rozwijanej Zapisz jako typ Jak wyświetlić w przeglądarce plik html zapisany na dysku twardym? Dokument HTML zapisany na dysku twardym lub na dyskietce można otworzyć w przeglądarce. Operacja jest bardzo prosta. Wybierz w menu File pozycję Open, a następnie kliknij przycisk Browse lub Open File i odszukaj żądany dokument (patrz rysunek 1.2), a następnie naciśnij OK, by pojawił się w oknie przeglądarki. Rys Otwieranie dokumentu HTML w przeglądarce tutaj jest to przeglądarka Internet Explorer 8

9 Trochę treningu Żeby oswoić się z językiem HTML, przyglądnij się postaciom źródłowym stron WWW dostępnych w Internecie. Jak wyświetlić postać źródłową strony WWW? Jak już wiesz, w swojej postaci źródłowej, strona WWW to po prostu plik tekstowy, do którego nazwy dołączone jest przedłużenie.html. Jeśli wyświetlisz taki plik w jakimś edytorze tekstu, zobaczysz tekst wymieszany ze specyficznymi znakami są to znaczniki HTML. Być może będziesz zaskoczony, że piękne strony WWW, z obrazkami i animacjami, wyglądają tak nieciekawie. Aby pojawiły się w całej krasie, ich kod źródłowy musi zostać odczytany przez przeglądarkę ot i cała tajemnica. Wyświetl kolejno kilka stron WWW w oknie przeglądarki, a najlepiej wyświetl strony w osobnych oknach. Jeśli korzystasz z przeglądarki Netscape Navigator, wybierz w menu View pozycję Page source (użytkownicy programu Internet Explorer powinni wybrać pozycję Source w menu View) (patrz rysunek 1.3). Rys Strona WWW i jej postać źródłowa 9

10 Przyglądnij się postaciom źródłowym stron zwracając uwagę na powtarzające się elementy. Podglądanie gotowych dokumentów HTML to doskonała metoda nauki języka. Najważniejsze informacje HTML to język hipertekstowego znakowania (Hypertext Markup Language), który stanowi ustanowioną przez konsorcjum World Wide Web Consortium (W3C) specyfikację nakreślającą postać dokumentów prezentowanych w Internecie. Twórcy przeglądarek sieciowych sprawdzają za pośrednictwem języka HTML jak ich produkty będą wyświetlać strony WWW na ekranie Twojego komputera. Twórcą języka HTML jest Tim Berners-Lee. HTML pozwala publikować w Internecie dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia, formularze, itd., pobierać za pośrednictwem połączeń hipertekstowych informacje z Internetu, projektować formularze oraz umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje. Dokument HTML jest dokumentem tekstowym. Jego nazwa składa się z dwóch członów nazwa.rozszerzenie. W przypadku dokumentów HTML rozszerzenie ma postać.htm lub.html (bardziej pewne jest to właśnie). Dokumenty html można tworzyć przy użyciu najprostszych edytorów tekstowych, takich jak Notatnik czy Webber. 10

11 Rozdział 2. Internet, strona WWW i znaczniki HTML World Wide Web i strona WWW Co to jest World Wide Web? World Wide Web (w skrócie WWW) to sieć komputerów nazywana popularnie Internetem. Tworzą ją komputery z całego świata. Komputery te porozumiewają się ze sobą za pośrednictwem protokołu HTTP. 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. Co musisz zrobić, żeby przeglądać strony WWW? 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ą najpopularniejsze przeglądarki to Netscape Navigator i Internet Explorer. Przeglądarkę należy poinformować, gdzie ma szukać danych. Informacja ta zawarta jest w adresie URL. Co to jest adres URL? URL to skrót od Uniform Resource Locator, co można przetłumaczyć jako uniwersalny identyfikator zasobów. Jego postać jest mniej więcej taka: Adres ten wpisujesz najczęściej w polu adresu przeglądarki (patrz rysunek 2.1). Przeglądarka wysyła wiadomość do komputera, którego adres podałeś (serwera), zawierającą żądanie strony. Serwer pobiera odpowiednie dane i przekazuje je występującemu o nie komputerowi. 11

12 Rys Pole adresu przeglądarki tu wpisujesz adres URL strony, której zawartość chcesz wyświetlić w przeglądarce Co przeglądarka zrobi z danymi, które otrzyma od serwera? Dane, które trafiły do Twojej przeglądarki, są zakodowane w specjalny sposób są zapisane w języku HTML. Przeglądarce to nie przeszkadza potrafi ona interpretować ten kod, więc wyświetla pobraną stronę na Twoim ekranie. Język HTML informuje przeglądarkę jak ma obsłużyć pobrane dane. Tak więc sam widzisz, jak ważny jest język HTML. Dotrzemy teraz do jego istoty zajmiemy się znacznikami HTML. Znaczniki Jeśli wyświetlisz kod źródłowy strony WWW, zobaczysz, że zawiera on szereg poleceń języka HTML umieszczonych w nawiasach kątowych. Twory te noszą nazwę znaczników. Jak wyglądają znaczniki? Znaczniki stosowane są zazwyczaj w parach (zwróć uwagę na ukośnik, /, który odróżnia znacznik zamykający od otwierającego): <znacznik otwierający>, </znacznik zamykający>, np. <html>, </html>, ale są wyjątki. Oto niektóre z nich: o o o <p> znacznik akapitu (w zasadzie istnieje znacznik zamykający, </p>, ale pominięcie go nie spowoduje błędu w działaniu strony; stosuj ten znacznik, aby rozpocząć nowy akapit), <br> znacznik nowego wiersza <hr> znacznik umożliwiający dodanie na stronie linii poziomej. Parę znaczników (lub znacznik pojedynczy, jeśli nie ma on znacznika zamykającego) nazywa się także elementem. Element pozbawiony znacznika zamykającego nazywa się pustym. Może on zawierać jedynie atrybuty. Jaka jest funkcja znaczników? Znaczniki informują przeglądarkę, jak wyświetlić stronę na ekranie. Wielkie czy małe litery w znacznikach? Znaczniki nie są wrażliwe na wielkość liter. Oznacza to, że <body> to to samo co <BODY>. Warto jednak zacząć przyzwyczajać się do małych liter. Są one zalecane w rekomendacji W3C specyfikacji HTML 4, a w specyfikacji XHTML są wymagane. 12

13 Co to są atrybuty znaczników i jaka jest ich funkcja? Atrybuty znaczników dostarczają dodatkowych informacji o elementach strony definiowanych poprzez znaczniki. Jeśli na przykład chciałbyś, aby Twoja strona miała tło w kolorze zielonym, wystarczy, że poinformujesz o tym przeglądarkę dodając do znacznika <body> odpowiedni atrybut: <body bgcolor="green">. Atrybut definiowany jest za pomocą pary: atrybut= wartość i umieszczany zawsze w znaczniku otwierającym danego elementu HTML. Wartości należy podawać w cudzysłowie pojedynczym,, lub podwójnym,. Elementy dokumentu html Pewne znaczniki pełnią szczególne funkcje. Tworzą bowiem podstawowy szkielet dokumentu html. Jaka jest ta podstawowa postać kodu HTML dokumentu html? Otwórz Notatnik lub edytor Webber i wpisz w nim następujący tekst (Wydruk 2.1) jest to podstawowy, najprostszy szkielet dokumentu html: Wydruk 2.1. Podstawowy szkielet dokumentu html <html> <head> <title>tytuł strony</title> </head> <body> To jest moja pierwsza strona WWW. </body> </html> Zapisz plik pod nazwą mojastrona.html, uruchom przeglądarkę i otwórz w niej swój plik (wybierz w menu File lub Plik w zależności od wersji językowej pozycję Open, Open File lub Otwórz). W przeglądarce wyświetlone zostanie tylko zdanie To jest moja pierwsza strona WWW. Reszta tekstu nie pojawi się to kod dla przeglądarki informujący ją, co ma z dokumentem zrobić (patrz rysunek 2.2). Rys Zapisz dokument HTML i otwórz go w przeglądarce oto Twoja pierwsza strona WWW 13

14 Jakie znaczenie mają poszczególne wyrażenia kodu z wydruku 2.1? Pierwszym znacznikiem w Twoim dokumencie HTML jest znacznik <html>. Informuje on przeglądarkę, że jest to początek dokumentu HTML. Ostatnim znacznikiem kodu jest znacznik </html> jak już wiesz, jest to znacznik zamykający i informuje on przeglądarkę, że na nim kończy się dokument HTML. Znaczniki <html> i </html> informują, że wszystko, co znajduje się między nimi stanowi dokument HTML. Nową stronę będziesz zawsze rozpoczynał od znacznika <html> i kończył ją znacznikiem </html>. Znaczniki <head> i </head> wyznaczają element strony, który nosi nazwę nagłówka. Zawartość nagłówka nie jest wyświetlana na stronie WWW. Zwróć jednak uwagę na pasek tytułu okna przeglądarki, w którym wyświetliłeś swoją pierwszą stronę WWW. Tekst, który wpisałeś między znacznikami <title></title>, pojawia się na pasku tytułu tego okna. Strona może mieć tylko jeden tytuł, a ten z kolei może zawierać tylko tekst żadne inne znaczniki nie są tu dozwolone. Tytuł nie może być zbyt długi, bo nie zmieści się na pasku tytułu, ale nie przesadź też w odwrotną stronę, aby dać szansę przypadkowym czytelnikom zorientować się jaka jest tematyka strony. Pierwszym elementem strony jest nagłówek. Jego ramy wyznacza para <head>, </head>. Między tymi znacznikami umieszczany jest kod definiujący tytuł strony. W żadnym wypadku nie należy tu umieszczać treści strony! Strona WWW ma oczywiście swoją zawartość. W przykładzie umieściliśmy ją między znacznikami <body>, </body>. One właśnie wyznaczają drugi element strony WWW obszar treści. Para <body>, </body> wyznacza podstawową część strony tu twórca strony WWW umieszcza wszystko: treść, obrazy, połączenia, itd. Elementy strony WWW często nazywa się od angielskich nazw znaczników sekcją head i sekcją body. Potrafisz już je zdefiniować, potrafisz wyświetlić na ekranie przeglądarki tekst. Pora, abyś poznał nowe znaczniki i nauczył się kontrolować wygląd wyświetlanego na ekranie tekstu oraz nadawać mu określoną strukturę. Co to jest element meta? 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 (coraz 14

15 rzadziej jednak). 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. Do czego służą atrybuty znacznika <meta>? Niektóre serwisy wyszukujące korzystają z atrybutów znacznika <meta> przy indeksowaniu dokumentów. Atrybuty opisują dokument i dostarczają słów kluczowych. I tak atrybut name określa sposób opisu dokumentu dostarczony w atrybucie content. Oto przykład elementu meta, który definiuje opis strony (name="description"): <meta name="description" content="strona poświęcona kotom i innym futrzakom"> Oto przykład elementu meta, który zawiera słowa kluczowe, charakteryzujące zawartość strony WWW (name="keywords"): <meta name="keywords" content="html, DHTML, CSS, XML, XHTML, JavaScript, VBScript"> Oto przykład dokumentu html, w którym za pomocą elementu meta umieszczono informacje o autorze strony, dacie ostatniej modyfikacji dokumentu oraz o stosowanym oprogramowaniu (patrz wydruk 2.2). Wydruk 2.2. Atrybuty znacznika <meta> <html> <head> <meta name="author" content="jan Kowalski"> <meta name="revised" content="jan Kowalski,6/10/02"> <meta name="generator" content="microsoft FrontPage 4.0"> </head> <body> <p> Atrybuty meta podają w tym dokumencie dane autora, datę wprowadzenia poprawek oraz typ stosowanego oprogramowania. </p> </body> </html> Jak wykorzystać element meta, aby skierować użytkownika pod inny adres url? Element meta będzie bardzo przydatny, jeśli zmienił się adres url, pod którym można było oglądać Twoją stronę WWW. Na wydruku 2.3 znajdziesz kod html, który pozwoli 15

16 poinformować użytkownika, gdzie powinien Cię teraz szukać, a nawet sam skieruje go we właściwe miejsce. Wydruk 2.3. Kierowanie użytkownika pod nowy adres url <html> <head> <meta http-equiv="refresh" content="5;url= </head> <body> <p> Przepraszam! Już mnie tu nie ma! Nowy URL jest: <a href=" </p> <p> Za kilka sekund zostaniesz skierowany pod nowy adres. </p> <p> Jeśli komunikat wyświetlany jest dłużej, niż 5 sekund, kliknij to połączenie! </p> </body> </html> Kodowanie polskich znaków Jak wykorzystać znacznik <meta>, aby zdefiniować stronę kodową? Poprawne zdefiniowanie kodowania znaków jest w dokumencie HTML bardzo pożądane. Zaleca się aby polskie strony były kodowane w ISO , bo tylko wtedy będą poprawnie wyświetlane. Korzystając z edytora Webber nie musisz się martwić o poprawność kodowania samych liter to jego zmartwienie - musisz jednak pamiętać o wstawieniu odpowiedniego nagłówka <meta>.aby zapewnić czytelność dokumentu HTML, możesz: Zrezygnować ze stosowania polskich znaków diakrytycznych takie rozwiązanie posiada wiele zalet: niezależnie od systemu zawsze widać znaki może słowa nie są poprawne ortograficznie, ale względnie czytelne. Wyrazy nie są podzielone dziwnymi znakami. Zdarza się że potencjalni czytelnicy nie posiadają przeglądarki czytającej po polsku. Większość przeglądarek ma polską stronę kodową większość w Polce, na pewno tak, ale niekoniecznie tak będzie gdzieś w świecie. Dlatego też kodowanie bez polskich znaków jest pewnym rozwiązaniem i nie wymaga żadnych specjalnych zabiegów. 16

17 Korzystać z kodowania Windows-1250 kodowanie Windows zapewnia poprawne oglądanie strony użytkownikom systemu Windows, ale są przecież inne systemy i inni użytkownicy. Niewątpliwie zaletą tego sposobu jest to, że użytkownicy polskiej wersji systemu Windows mogą bez żadnych problemów pisać kod swoich stron korzystając z Notatnika. Gdy z jakich powodów zechcesz zdefiniować w dokumencie HTML stronę kodową Windows-1250, wpisz odpowiednią informację meta: <meta http-equiv="content-type" content="text/html; charset=windows-1250">. Takie rozwiązanie należy jednak odradzać. Zdefiniować stronę kodową ISO aby zdefiniować w dokumencie HTML tę stronę kodową, wpisz w elemencie meta: <meta http-equiv="content-type" content="text/html; charset=iso ">. Wymaga to korzystania z edytora, który potrafi prawidłowo kodować polskie litery takim edytorem jest Webber ( To rozwiązanie gorąco polecam. Najważniejsze informacje World Wide Web (w skrócie WWW) to sieć komputerów nazywana popularnie Internetem. Informacje dostępne są w Internecie w postaci dokumentów HTML zwanych stronami WWW. Strony WWW umieszczane są na specyficznych komputerach zwanych serwerami. 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ą. URL to skrót od Uniform Resource Locator, co można przetłumaczyć jako uniwersalny identyfikator zasobów. Jego postać jest mniej więcej taka: Adres ten określa ulokowanie strony WWW i jest podawany w polu adresu przeglądarki. Dane, które trafiły do Twojej przeglądarki, są zakodowane w specjalny sposób są zapisane w języku HTML. Język HTML informuje przeglądarkę jak ma obsłużyć pobrane dane informacje te są zawarte w znacznikach. Znaczniki to polecenia języka HTML umieszczone w nawiasach kątowych. Ich postać jest następująca: <znacznik otwierający>, </znacznik zamykający>. Znaczniki nie są wrażliwe na wielkość liter. Dokument HTML otwiera znacznik <html>, a zamyka znacznik </html>. Elementy strony umieszczane są między tymi znacznikami. Podstawowe elementy strony WWW to obszar nagłówka i obszar treści (sekcja head i sekcją body). Obszar nagłówka wyznaczają znaczniki <head> i </head>. Zawartość strony WWW tekst obrazy, połączenia, itp. jest umieszczana między znacznikami <body>, </body>. One właśnie wyznaczają drugi element strony WWW obszar treści. 17

18 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. Stronę kodową ISO (polskie litery!) definiuje się w elemencie meta: <meta http-equiv="content-type" content="text/html; charset=iso ">. 18

19 Rozdział 3. Znaczniki HTML formatujące tekst i nadające strukturę dokumentowi HTML Nagłówki i akapity tekstu Co to są nagłówki i jak wyglądają ich znaczniki HTML? Nagłówki, tak jak w dokumencie edytora Word, dzielą tekst na części, a dzięki temu, że nadają tekstowi rzucający się w oczy wygląd, zwracają na ten podział uwagę czytelnika. Wszyscy użytkownicy edytora Word wiedzą, o co chodzi musimy jedynie nauczyć się korzystać z innego narzędzia. Aby przekształcić fragment tekstu w nagłówek, wystarczy zawrzeć go między znacznikami nagłówka, tak jak w tym przykładzie: <h1> To jest nagłówek pierwszego poziomu </h1> Znaczniki nagłówka powiększają tekst i dodają do niego pogrubienie. Masz do dyspozycji sześć rozmiarów nagłówka pokazane są one na rysunku 3.1. Polecałabym korzystanie nagłówków drugiego poziomu, <h2> </h2>. Jeśli chcesz, aby nagłówek był nieco mniejszy, użyj pary <h3> </h3>. Nagłówki naprawdę ogromne uzyskasz stosując <h1> </h1>, ale większość projektantów stron ich unika ze względu na dysproporcję wielkości w stosunku do zwykłego tekstu. Nagłówki <h4>, <h5> i <h6> także są rzadko wykorzystywane, ponieważ ich rozmiar jest bliski rozmiarowi tekstu, a w przypadku nagłówka <h6> nawet mniejszy (patrz rysunek 3.1). Rys Sześć poziomów nagłówka i zwykły tekst 19

20 Jak zdefiniować nagłówki w kodzie HTML? W rozdziale 2 nauczyłeś się definiować podstawowy szkielet strony WWW. Skorzystamy teraz z niego i będziemy go rozbudowywać o nowe elementy. Wczytaj do edytora tekstu (Notatnika lub Webbera) plik HTML zawierający ten podstawowy kod. Zmień dowolnie tytuł strony (jak pamiętasz, tytuł zawarty jest między znacznikami <title></title>). Aby zdefiniować nagłówek, wstaw między znacznikami <body> </body> parę znaczników nagłówka, na przykład <h2> </h2>, a między nimi wpisz tekst nagłówka (patrz wydruk 3.1). Zapisz plik i wyświetl stronę w przeglądarce. Ponieważ rozbudowywana teraz strona będzie już zapisywana pod tą samą nazwą (zapisując szkielet strony WWW zdefiniowaliśmy nazwę mojastrona.html patrz rozdział 2), możesz nacisnąć w oknie przeglądarki przycisk Odśwież lub Reload, aby ukazała się uaktualniona wersja strony (patrz rysunek 3.2). Wydruk 3.1. Definiujemy nagłówek <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1>koty duże</h1> <!-- to jest nagłówek poziomu h1--> <h2>koty małe</h2> <!-- to jest nagłówek poziomu h2--> </body> </html> Rys W oknie przeglądar ki pojawiły się zdefiniowa ne przed chwilą nagłówki 20

21 Jak wycentrować nagłówek? Nagłówek jest wyrównany do lewego marginesu oznacza to, że jest dosunięty do lewej krawędzi strony. Wynika to z domyślnych ustawień przeglądarki. Możesz go umieścić na środku strony nazywa się to wyśrodkowaniem, zagnieżdżając znaczniki nagłówka w obrębie znacznika <center>: <center><h2>twój nagłówek</h2></center> lub dodając w znaczniku nagłówka atrybut align= center : <h2 align= center >Twój nagłówek</h2> Jak dodać tekst? Strona ma już tytuł i nagłówek, wprowadźmy więc jej zawartość tekstową. W wersji HTML 4 akapit jest definiowany za pomocą pary znaczników <p> </p>. Jak już wspominałam, brak znacznika zamykającego nie spowoduje katastrofy, ale tutaj będziemy go stosować (tym bardziej, że w specyfikacji XHTML wymagania są znacznie ostrzejsze). Otwórz plik strony w oknie edytora. Przygotuj treść strony i wpisz tekst między znacznikami <p> </p>, w obrębie elementu body. Wydruk 3.2 pomoże Ci zorientować się o co chodzi. Zapisz stronę i zobacz jak się prezentuje w przeglądarce (patrz rysunek 3.3). Wydruk 3.2. Akapity tekstu <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1 align="center">koty duże</h1> <!-- to jest nagłówek poziomu h1--> <!-- to jest pierwszy akapit tekstu--> <p>lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami. Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy sa zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> <h2 align="center">koty małe</h2> <!-- to jest nagłówek poziomu h2--> <!-- to jest drugi akapit tekstu--> <p>kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata). Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> 21

22 </body> </html> Rys Strona została zaopatrzo na w wycentro wane nagłówki oraz w tekst Jak zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym akapicie? Pamiętaj, że efekt wizualny jaki wywrze Twoja strona, zależy w dużym stopniu od ustawień na komputerach czytelników. Niektórzy mają duże monitory, inni małe, parametry kart grafiki różnią się, różne są w związku z tym ustawienia. Tekst będzie też przeformatowywany przy każdej zmianie rozmiarów okna przeglądarki. Twórcy strony WWW zależy na tym, aby tak sformatować zawartość strony, żeby zniosła bezpiecznie te pułapki. Nigdy jednak nie próbuj formatować tekstu w edytorze dodając puste wiersze lub spacje (od tej zasady jest pewien wyjątek omawiam go w następnym punkcie). To nie ma sensu. Dodatkowe spacje zostaną i tak potraktowane jako jeden odstęp. Nie wstawiaj też pustych akapitów, a więc par: <p></p>, które nie zawierają żadnego tekstu. W takim razie jak sobie poradzić, gdy wprowadzany automatycznie przed i za nagłówkami oraz akapitami wolny obszar nie wystarcza? Zastosuj znacznik <br>. Ten znacznik, o czym powinieneś pamiętać, nie ma znacznika zamykającego. Znacznik pozbawiony znacznika zamykającego nosi miano pustego. Wydruk 3.3 pokazuje, w jaki sposób można dodać wolny obszar w samym akapicie. Efekt tej operacji przedstawiono na rysunku 3.4. Wydruk 3.3. Dodatkowy wolny obszar znacznik <br> <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> 22

23 </head> <body> <h1 align="center">koty duże</h1> <!-- to jest nagłówek poziomu h1--> <!-- to jest pierwszy akapit tekstu--> <p>lwa, tygrysa, panterę, geparda i jaguara nazywamy wielkimi kotami.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (Felidae). Do tej rodziny należą też małe koty: puma, ryś, ocelot, serwal. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> <h2 align="center">koty małe</h2> <!-- to jest nagłówek poziomu h2--> <!-- to jest drugi akapit tekstu--> <p>kot domowy najprawdopodobniej pochodzi od dwóch gatunków: od kota nubijskiego (Felis silvestris lybica) i od azjatyckiego kota stepowego (Felis silvestris ornata). <br><br>do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> </body> </html> Rys Do akapitu wprowadz ono dodatkow e wolne obszary Jak zachować odstępy i łamania wierszy w tekście? A jeśli mimo wszystko chcesz zachować wprowadzone do tekstu liczne spacje i łamania wierszy? Czy jest taka możliwość? Tak. Daje ją znacznik <pre>. Jest to doskonałe 23

24 narzędzie do prezentacji dokumentów, które z natury swojej mają określoną strukturę, jak na przykład programy komputerowe. Wydruk 3.5 pokazuje sposób użycia elementu pre zwróć uwagę, że umieszczone w kodzie odstępy są zachowane na wyświetlanej w przeglądarce stronie (patrz rysunek 3.5). Wydruk 3.4. Tekst preformatowany <html> <body> <pre> To jest tekst preformatowany. Zachowuje on zarówno odstępy jak i łamania wierszy. </pre> <p>znacznik pre jest doskonały do prezentacji kodu programu:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> 24

25 Rys Element pre pozwala na zachowanie dodatkowych odstępów porównaj wygląd wydruku i strony Jak sformatować tekst? Jeśli przyglądniesz się stronie z rysunku 3.4, zauważysz, że aż się prosi wyróżnić pewne fragmenty tekstu na przykład nazwy łacińskie napisać kursywą, a nazwy polskie czcionką pogrubioną. Innymi słowy konieczne jest zastosowanie formatowania. Formatowanie pozwala między innymi wprowadzić tekst pisany czcionką pogrubioną, kursywą oraz indeksy górne. W specyfikacji HTML 4 zalecane jest co prawda korzystanie przy formatowaniu z arkuszy stylu (poznasz je w rozdziale 4., Kaskadowe arkusze stylów), lecz w przypadku prostego formatowania można korzystać także ze znaczników stylów z wcześniejszych wersji języka HTML. Tabela 3.1 prezentuje listę takich znaczników wraz z opisem i przykładami. Tabela 3.1. Style fizyczne i logiczne znaków Znacznik Opis Przykład zastosowania Style fizyczne <b> Pogrubienie <p><b>ten tekst jest pisany czcionką pogrubioną</b></p> <i> Kursywa <p><i>ten tekst jest pisany kursywą</i><p> <tt> <big> <small> Czcionka maszynowa (znaki o jednakowej szerokości) Czcionka większa od reszty tekstu Czcionka mniejsza od reszty tekstu <p>wpisz <tt>copy nazwa_pliku lpt:</tt>, aby wydrukować plik</p> <p>moje oczy zrobiły się <big>wielkie</big></p> <p>krasnoludki są tak <small>malutkie</small>, że ich nie widać</p> <sub> Indeks dolny H<sub>2</sub>O <sup> Indeks górny <sup>31</sup>p <em> Emfaza, wyróżnienie tekstu Style logiczne <p>lubię Cię <em>bardzo.</em></p> 25

26 <strong> <code> <samp> <kbd> <var> (zazwyczaj kursywa) Wyraźne wyróżnienie (zazwyczaj pogrubienie) Wskazuje, że fragment tekstu to kod programu, który ma być wyświetlony czcionką o stałej szerokości Wskazuje, że jest to tekst przykładowy (podobnie jak <code>) Oznacza tekst, który ma być wpisany z klawiatury Wskazuje nazwę zmiennej <p>lubię Cię <strong>ogromnie.</strong></p> <p><code>for a=1 to 100 </code></p> <p>adres URL: <samp> <p>podaj komendę: <kbd>find. -name prune - print</kbd></p> <code>chown </code><var>twoje_imie nazwa_pliku</var></p> <dfn> Znacznik definicji <p>podane w tabeli znaczniki definiują <dfn>style znaków</dfn>.</p> <cite> Stosowany w przypadku krótkich cytatów lub odnośników literaturowych <p>kto to powiedział, że <cite>milczenie jest złotem</cite>?</p> Na wydruku 3.5 możesz zobaczyć przykłady z tabeli bezpośrednio w kodzie HTML, a na rysunku 3.6 efekt działania poszczególnych sposobów formatowania. Wydruk 3.5. Formatowanie tekstu <html> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h3>style fizyczne</h3> <p>czcionka pogrubiona: <br><b>ten tekst jest pisany czcionką pogrubioną</b></p> <p>kursywa:<br><i>ten tekst jest pisany kursywą</i><p> 26

27 <p>czcionka maszynowa:<br>wpisz <tt>copy nazwa_pliku lpt:</tt>, aby wydrukować plik</p> <p>czcionka powiększona:<br>moje oczy zrobiły się <big>wielkie</big></p> <p>czcionka pomniejszona:<br>krasnoludki są tak <small>malutkie</small>, że ich nie widać</p> <p>indeks dolny:<br>h<sub>2</sub>o</p> <p>indeks górny:<br><sup>31</sup>p</p> <h3>style logiczne</h3> <p>emfaza:<br>lubię Cię <em>bardzo.</em></p> <p>wyraźne wyróżnienie:<br>lubię Cię <strong>ogromnie.</strong></p> <p>kod programu:<br><code>for a=1 to 100 </code></p> <p>tekst przykładowy:<br>adres URL: <samp> <p>tekst z klawiatury:<br>podaj komendę: <kbd>find. -name prune -print</kbd></p> <p>zmienna:<br><code>chown </code><var>twoje_imie nazwa_pliku</var></p> <p>definicja:<br>podane w tabeli znaczniki definiują <def>style znaków</def>.</p> <p>cytat:<br>kto to powiedział, że <cite>milczenie jest złotem</cite>?</p> </body> </html> 27

28 Rys Oto efekt działania znacznikó w formatow ania z tabeli 3.1 Otwórzmy więc ponownie nasz przykładowy plik HTML w edytorze i korzystając z pomocy wyrażeń HTM z tabeli 3.1 sformatujmy odpowiednie fragmenty tekstu (patrz wydruk 3.6). Po wpisaniu dodatkowych elementów kodu, plik trzeba zapisać, aby można zobaczyć zmiany w przeglądarce (wyświetlimy aktualną postać strony klikając przycisk Odśwież lub Reload). Jak widać na rysunku 3.7 tekst strony jest teraz łatwiejszy w odbiorze. Pamiętaj jednak, aby nie przesadzić z formatowaniem, bowiem efekt może być wówczas odwrotny od zamierzonego. Wydruk 3.6. Formatowanie tekstu <html> <head> 28

29 <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1 align="center">koty duże</h1> <!-- to jest nagłówek poziomu h1--> <!-- to jest pierwszy akapit tekstu i elementy formatowania--> <p><b>lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i <b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>felidae</i>). Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>, <b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> <h2 align="center">koty małe</h2> <!-- to jest nagłówek poziomu h2--> <!-- to jest drugi akapit tekstu i elementy formatowania--> <p><b>kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od <b>kota nubijskiego</b> (<i>felis silvestris lybica</i>) i od <b>azjatyckiego kota stepowego</b> (<i>felis silvestris ornata</i>). <br><br>do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> </body> </html> Rys Do tekstu zastosowa no formatow ani 29

30 Czy można stosować do tego samego tekstu kilka znaczników formatujących? Do tego samego fragmentu tekstu można zastosować jednocześnie różne style: na przykład pogrubienie i kursywę: <B><I>Pogrubienie i kursywa</i></b> co daje w efekcie tekst pogrubiony pisany kursywą. Stosując znaczniki wielokrotne pamiętać jednak należy o znacznikach zamykających musi ich być tyle samo ile otwierających, oraz o kolejności znaczników kolejność znaczników zamykających musi być odwrotna niż znaczników otwierających. Tę zasadę pokazuje rysunek 3.8. Rys Zasady stosowani a kilku znacznikó w do tego samego tekstu Jak dodać linię poziomą? Linią poziomą można oddzielać od siebie wizualnie fragmenty strony WWW w naszym przykładzie linia pozioma może oddzielić fragmenty tekstu poświęcone innym zwierzakom. Aby umieścić na stronie linię poziomą, otwórz plik w oknie edytora i wpisz pod definicją pierwszego akapitu znacznik <hr> (patrz wydruk 3.7 element hr wyróżniony został czcionką pogrubioną). Zapisz plik i przetestuj go w przeglądarce (patrz rysunek 3.9). Wydruk 3.7. Wstawiamy linię poziomą <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1 align="center">koty duże</h1> <!-- to jest nagłówek poziomu h1--> <!-- to jest pierwszy akapit tekstu i elementy formatowania--> <p><b>lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i <b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>felidae</i>). Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>, <b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> 30

31 <! tu wstawimy linię poziomą--> <hr> <h2 align="center">koty małe</h2> <!-- to jest nagłówek poziomu h2--> <!-- to jest drugi akapit tekstu i elementy formatowania--> <p><b>kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od <b>kota nubijskiego</b> (<i>felis silvestris lybica</i>) i od <b>azjatyckiego kota stepowego</b> (<i>felis silvestris ornata</i>). <br><br>do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> </body> </html> Rys Akapity odnoszące się do różnych tematów zostały rozdzielone linią poziomą Czy można modyfikować wygląd linii poziomej? Znacznik <hr> ma swoje atrybuty, które umożliwiają definiowanie grubości, długości i wyrównania linii. Tabela 3.2 prezentuje te atrybuty wraz z przykładem ich użycia. Atrybuty te są nadal uznawane w wersji HTML 4, lecz zaleca się stosowanie arkuszy stylów. Tabela 3.2. Atrybuty znacznika <hr> Atrybut Opis size= piksele Grubość linii w pikselach; wartość domyślna (i najmniejsza) to 2 width= piksele wartość% Długość linii w poziomie; wartości mogą być podawane w pikselach lub jako procent szerokości okna 31

32 align= left right center Wyrównanie linii. Przykład: <hr width= 50% size= 3 align= center > Trzy rodzaje list W języku HTML możliwe jest zdefiniowanie trzech rodzajów list: wypunktowanej, numerowanej i definicji. W pierwszym wypadku pozycje listy oznaczone są znakiem wypunktowania na przykład kropkami, w drugim są numerowane, a w trzecim listę tworzą terminy i ich definicje. Jak zdefiniować listę wypunktowaną? Listę wypunktowaną definiuje para znaczników <ul> </ul>. Między nimi wstawiane są pozycje listy do tego celu służy para znaczników <li> </li>. Pozycji listy może być wiele. O ile w przypadku elementu ul znacznik zamykający jest konieczny, to w przypadku pozycji listy, czyli elementu li, takiego wymogu nie ma. Wydruk 3.8 prezentuje podstawową postać listy wypunktowanej: Wydruk 3.8. Lista wypunktowana <html> <head> <title>lista wypunktowana</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>lista wypunktowana:</h2> <ul> <li>pierwsza pozycja listy</li> <li>druga pozycja listy</li> <li>trzecia pozycja listy</li> </ul> </body> <html> Czy można modyfikować znak wypunktowania listy? Kropka to domyślny znak wypunktowania. Jeśli chcesz użyć innego znaku, musisz zdefiniować go korzystając z atrybutu type znacznika <ul>. Oto wartości atrybutu type dla listy wypunktowanej: "disc" znak domyślny czarna kropka "circle" kółko (puste w środku) "square" kwadrat 32

33 Na wydruku 3.9 pokazano różne przykłady definicji list wypunktowanych, a rysunek 3.10 prezentuje wygląd list w oknie przeglądarki. Wydruk 3.9. Lista wypunktowana znaki wypunktowania <html> <head> <title>lista wypunktowana</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h4>kropki jako znaki wypunktowania:</h4> <ul type="disc"> <li>brzoza</li> <li>topola</li> <li>lipa</li> <li>dąb</li> </ul> <h4>kółka jako znaki wypunktowania:</h4> <ul type="circle"> <li>brzoza</li> <li>topola</li> <li>lipa</li> <li>dąb</li> </ul> <h4>kwadraty jako znaki wypunktowania:</h4> <ul type="square"> <li>brzoza</li> <li>topola</li> <li>lipa</li> <li>dąb</li> </ul> </body> </html> 33

34 Rys Różne przykłady list wypunktow anych atrybut type znacznika <ul> umożliwia zdefiniowan ie znaku wypunktow ania Jak zdefiniować listę numerowaną? Drugim typem listy jest lista numerowana. Definiuje ją para znaczników <ol> </ol>. Znacznik zamykający </ol> jest absolutnie konieczny. Pozycje listy są oznaczane w taki sam sposób, jak w przypadku listy wypunktowanej i podobnie jak tam znacznik zamykający </li> jest opcjonalny. Wydruk 3.10 prezentuje podstawową postać listy numerowanej: Wydruk Lista numerowana <html> <head> <title>lista numerowana</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>lista numerowana:</h2> <ol> <li>pierwsza pozycja listy</li> <li>druga pozycja listy</li> <li>trzecia pozycja listy</li> </ol> </body> <html> 34

35 Czy można modyfikować znak numerowania listy? Sposób numeracji listy numerowanej można zmieniać, korzystając z tego samego atrybutu type, co w przypadku listy wypunktowanej. Inne są oczywiście jego wartości. Atrybut type umieszczany jest w znaczniku otwierającym <ol>. W przypadku list numerowanych, wartości atrybutu type są następujące: "l" numeracja standardowa (1, 2, 3...) "a" małe litery alfabetu (a, b, c...) "A" wielkie litery alfabetu (A, B, C...) "i" kolejne liczby rzymskie pisane małymi literami (i, ii, iii...) "I" kolejne liczby rzymskie (I, II, III...) Na wydruku 3.11 pokazano różne przykłady definicji list numerowanych, a rysunek 3.11 prezentuje wygląd list w oknie przeglądarki. Wydruk Lista numerowana typy numeracji <html> <head> <title>lista numerowana</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h4>lista numerowana:</h4> <ol> <li>lipa</li> <li>dąb</li> <li>klon</li> <li>kasztan</li> </ol> <h4>lista alfabetyczna wielkie litery:</h4> <ol type="a"> <li>lipa</li> <li>dąb</li> <li>klon</li> <li>kasztan</li> </ol> <h4>lista alfabetyczna małe litery:</h4> <ol type="a"> 35

36 <li>lipa</li> <li>dąb</li> <li>klon</li> <li>kasztan</li> </ol> <h4>numeracja rzymska:</h4> <ol type="i"> <li>lipa</li> <li>dąb</li> <li>klon</li> <li>kasztan</li> </ol> <h4>liczby rzymskie pisane małymi literami:</h4> <ol type="i"> <li>lipa</li> <li>dąb</li> <li>klon</li> <li>kasztan</li> </ol> </body> </html> 36

37 Rys Różne przykłady list numerowanych atrybut type znacznika <ol> umożliwia zdefiniowanie znaku numeracji Jak utworzyć listę definicji? Trzecim i ostatnim typem listy jest lista definicji. Umożliwia ona prezentacje terminów wraz z definicjami. Listę definicji otwiera znacznik <dl>, a zamyka znacznik </dl>. Terminy wstawiane są za pomocą pary <dt> </dt>, a ich definicje przy użyciu pary <dd> </dd>. Znaczniki </dt> i </dd> są opcjonalne. Wydruk 3.12 pokazuje podstawowy przykład takiej listy, a jej wygląd możesz zobaczyć na rysunku Wydruk Lista definicji <html> <head> <title>lista definicji</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>lista definicji:</h2> <dl> <dt>pieniądze</dt> <dd>środek płatniczy.</dd> 37

38 <dt>woda</dt> <dd>substancja chemiczna, złożona z dwóch atomów wodoru i jednego atomu tlenu.</dd> </dl> </body> <html> Rys Lista definicji Czy listy różnego typu można ze sobą łączyć? Tak, listy różnego typu można łączyć jest to tak zwane zagnieżdżanie list. Jest ono przydatne, gdy trzeba na przykład zdefiniować podpunkty określonego punktu listy. Wówczas wystarczy wstawić listę jako element innej listy. Brzmi może trochę tajemniczo, ale przykład wyjaśni Ci o co chodzi. Skorzystajmy z wydruku 3.10 listy numerowanej i dodajmy do jej kolejnych numerowanych pozycji podpunkty oznaczone znakiem wypunktowania. Efekty tej operacji prezentuje wydruk Wpisz kod html w edytorze, zapisz swój plik i przetestuj w przeglądarce (patrz rysunek 3.13). Wydruk Zagnieżdżanie list <html> <head> <title>lista numerowana z podpunktami</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>lista numerowana z podpunktami:</h2> 38

39 <! poniżej jest kod listy numerowanej, a każda jej pozycja ma podpunkty--> <ol> <li>pierwsza pozycja listy</li> <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> </ul> <li>druga pozycja listy</li> <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> </ul> <li>trzecia pozycja listy</li> <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> </ul> </ol> </body> <html> Rys Lista numerowa na, której każda pozycja ma podpunkty 39

40 Czy w obrębie listy można korzystać z innych znaczników? Jeśli pozycję listy stanowi długi tekst, można skorzystać na przykład ze znaczników akapitu, <p> lub nagłówków, <hn>, aby nadać mu znośniejszą dla oka postać. Można także wprowadzić do listy trochę wolnej przestrzeni tu przyda się znacznik <br>, lub wydzielić punkty podstawowe podkreślając je. Spróbujmy tak właśnie potraktować naszą listę numerowaną z podpunktami (patrz wydruk 3.13, rysunek 3.13). W obecnej postaci sprawia ona wrażenie przeładowanej i jest mało czytelna. Wprowadźmy więc wolny obszar, a liniami poziomymi podkreślmy główne punkty. Otwórz więc plik z wydruku 3.13 i wstaw za każdą z pozycji listy numerowanej znacznik <hr>. Aby podkreślony został sam tekst, można w znaczniku <hr> dodać atrybut width= wartość określający długość linii poziomej (patrz tabela 3.2) oraz atrybut align= left, który spowoduje dosunięcie linii do lewego marginesu. Za podpunktami warto wprowadzić trochę wolnego miejsca wówczas łatwiej będzie czytać listę. Tak więc wstaw za wyrażeniem <li>punkt drugi</li> dwa znaczniki <br>. Wydruk 3.14 prezentuje cały kod, a efekty wprowadzonych zmian możesz zobaczyć na rysunku Wydruk Poprawianie czytelności listy za pomocą linii poziomych i wolnej przestrzeni <html> <head> <title>lista numerowana z podpunktami</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>lista numerowana z podpunktami:</h2> <ol> <li>pierwsza pozycja listy</li><hr align="left" width="200"> <ul> <li>punkt pierwszy</li> <li>punkt drugi</li><br><br> </ul> <li>druga pozycja listy</li><hr align="left" width="200"> <ul> <li>punkt pierwszy</li> <li>punkt drugi</li><br><br> </ul> <li>trzecia pozycja listy</li><hr align="left" width="200"> <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> 40

41 </ul> </ol> </body> <html> Rys Lista numerowa na z podpunkta mi wprowadzo no trochę wolnej przestrzeni i podkreślon o główne punkty Najważniejsze informacje Atrybuty opisują właściwości elementów strony WWW. Definiuje się je za pomocą par: atrybut= wartość i umieszcza zawsze w znaczniku otwierającym danego elementu HTML. Wartości należy podawać w cudzysłowie pojedynczym, lub podwójnym,. Aby przekształcić tekst w nagłówek, należy zawrzeć go między znacznikami nagłówka, <hn> </hn>, umieszczonymi w sekcji body dokumentu. W języku HTML istnieje sześć poziomów nagłówka: h1, h2, h3, h4, h5 i h6. Poziom ważności nagłówka maleje wraz ze wzrostem jego numeru. Nagłówek może być dowolnie długi. Aby wyśrodkować nagłówek, znaczniki nagłówka można zagnieździć w obrębie znacznika <center>: <center><hn>nagłówek<hn></center>, lub dodać w znaczniku nagłówka atrybut align= center. W ten sam sposób można wypośrodkowywać obrazy lub tekst. Akapit tekstu definiowany jest przez parę znaczników <p> </p> umieszczaną w obrębie znaczników <body> </body>. 41

42 Aby zwiększyć odstęp między akapitami lub wprowadzić odstęp w samym akapicie można skorzystać ze znacznika <br>. Aby zachować istniejący układ tekstu, w którym użyto dodatkowych odstępów i łamań wierszy, można skorzystać z elementu pre: <pre>tekst Preformatowany</pre>. Aby zastosować do tekstu formatowanie takie jak pogrubienie, kursywa, indeks dolny lub górny, czy któryś ze stylów logicznych, należy formatowany tekst umieścić między parą znaczników formatujących. Lista znaczników znajduje się w tabeli 3.1 oraz w tabeli A1 z dodatku A. Do tego samego fragmentu tekstu można zastosować jednocześnie różne style, pamiętając jednak o znacznikach zamykających i poprawnej kolejności znaczników. Znacznik definiujący linię poziomą to <hr>. Nie ma on znacznika zamykającego. Listy numerowane to listy, których elementy są numerowane. Takie listy są objęte znacznikami <ol> </ol>, a każdy element listy rozpoczyna się od znacznika <li>. Listy wypunktowane w tych listach elementy są oznaczane znakiem wypunktowania i podobnie jak poprzednio poprzedza je znacznik <li>. Lista wypunktowana zawiera się między znacznikami <ul> </ul>. Listy definicji to listy, w których są dwie składowe: pojęcie i definicja. Znacznik <dt> definiuje pojęcie, a znacznik <dd> definicję. Np.: <dt>kot</dt><dd>zwierzę futerkowe</dd>. Elementy umieszczane są w obrębie pary znaczników <dl> </dl>. Listy wypunktowane i numerowane można modyfikować. Atrybut type pozwala na zmianę domyślnego znaku wypunktowania, a w przypadku list numerowanych, znaku numerowania. 42

43 Rozdział 4. Kaskadowe arkusze stylów Ogólna postać kaskadowego arkusza stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają określać rozmiar i kolor czcionki, definiować odstępy i rozmieszczenie tekstu oraz obrazów na stronie, a pełna lista ich możliwości jest znacznie dłuższa. Znaczniki HTML zostały pierwotnie zaprojektowane jako narzędzia definiowania zawartości dokumentu. I tak znacznik nagłówka określał: To jest nagłówek, znacznik akapitu stwierdzał: To jest akapit tekstu, znacznik tabeli informował: To jest tabela, a o układzie strony decydowała przeglądarka. Wraz z rozbudową możliwości przeglądarek zaczęły pojawiać się coraz to nowe znaczniki i atrybuty. Tworzenie stron WWW, których zawartość byłaby dobrze odseparowana od układu dokumentu, stawało się coraz trudniejsze. Z tego właśnie powodu konsorcjum W3C powołało do życia kaskadowe arkusze stylów wprowadzono je do specyfikacji HTML 4.0. Obecnie są one standardem i zarówno Netscape 4, jak i Internet Explorer 4 je obsługują. Co daje stosowanie arkuszy CSS? Podstawowe zalety stylów CSS to możliwość szybkiej i prostej modyfikacji stylu oraz błyskawiczna wręcz aktualizacja postaci dokumentu w przypadku takich zmian. One naprawdę zaoszczędzą Twój czas! Wyobraź sobie, że w rozbudowanej witrynie trzeba zmienić sposób formatowania dziesiątków nagłówków czy połączeń! To wiele godzin pracy, jeśli będziesz ręcznie wyszukiwał elementy i zmieniał ich atrybuty, lub kilka chwil, jeśli zastosujesz w dokumencie arkusze CSS wówczas modyfikacja stylu to parę stuknięć w klawisze, a aktualizacja to automat. Czym są kaskadowe arkusze stylów? Kaskadowy arkusz stylów to mechanizm definiujący formatowanie dla danej strony przy zastosowaniu stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą. Jakie są rodzaje arkuszy stylów? Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym elemencie HTML wówczas mówimy o stylu wpisanym, w obrębie elementu head strony HTML (to znaczy między znacznikami <head> </head>) takie arkusze stylów nazywa się osadzonymi, lub może zostać pobrana z pliku zewnętrznego jest to wtedy zewnętrzny lub łączony arkusz stylów. Wszystkie typy arkuszy CSS wpisane, osadzone i zewnętrzne można stosować jednocześnie. 43

44 Łączone arkusze stylów są przechowywane w zewnętrznym pliku o rozszerzeniu nazwy.css. Składnia takiego arkusza jest podobna jak w przypadku arkusza osadzonego, a sformatowanie strony wymaga jedynie umieszczenia połączenia do pliku zawierającego definicję stylu. Jaki styl zostanie zastosowany, jeśli w dokumencie zdefiniowano kilka arkuszy stylów (czyli jak działa kaskada stylów)? W przypadku obecności różnych arkuszy stylów na jednej stronie, hierarchia ich ważności rośnie w następującej kolejności: 1. Domyślne ustawienia przeglądarki 2. Zewnętrzny arkusz stylów 3. Osadzony arkusz stylów (umieszczony między znacznikami <head> </head>) 4. Styl wpisany (dotyczący konkretnego elementu HTML) Najwyższy priorytet ma styl wpisany, co oznacza, że jego ustawienia są dominujące względem zadeklarowanych w sekcji head oraz pobranych z pliku zawierającego zewnętrzny arkusz stylów. Dominują także nad domyślnymi ustawieniami przeglądarki. Jaka jest ogólna postać kaskadowego arkusza stylów? Postać arkusza stylu CSS zależy od typu arkusza. I tak w przypadku stylu wpisanego a więc umieszczonego w konkretnym znaczniku ma ona taką oto postać: <znacznik style= właściwość: wartość; > Ogólna postać osadzonego arkusza CSS jest następująca: <style type="text/css"> <!-- selektor {właściwość: wartość;} --> </style> Zawarta w obrębie elementu style definicja następującą składnię: selektor{właściwość: wartość} Selektorem nazywa się znacznik czy też element, który chcesz zdefiniować, właściwość to jego atrybut, który zmieniasz przypisując mu nową wartość. Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych, tak jak w tym przykładzie: body {color: black} Jeśli wartość ma postać wielowyrazową na przykład sans serif umieszcza się ją w cudzysłowie: p {font-family: "sans serif"} Oto przykład rzeczywistej definicji: <style type="text/css"> <!-- body {font-family: Verdana, Arial, Helvetica;} --> </style> 44

45 Między znacznikami <style> i </style> umieszczana jest lista znaczników HTML wraz z właściwościami arkusza, które je definiują. Definicja zaprezentowana powyżej zawiera tylko jeden symboliczny selektor definiowany przez jedną właściwość CSS. W przypadku większej liczby właściwości, wszystkie muszą być umieszczone w nawiasie klamrowym ({}) oraz oddzielone średnikami (;). Zwróć uwagę na znaczniki komentarza html, obejmujące wszystkie znaczniki i właściwości CSS dzięki temu, że zostały zastosowane, przeglądarki, które nie potrafią obsługiwać arkuszy stylów nie wyświetlą śmieci, lecz potraktują kod jako komentarz. Te z kolei, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów. Co oznacza ta definicja stylu? W zaprezentowanej definicji stylu zdefiniowany jest krój pisma, który zostanie zastosowany do tekstu strony w sekcji body. Innymi słowy tekst w tej sekcji będzie pisany czcionką Verdana (lub czcionką Arial, ewentualnie czcionką Helvetica, jeśli Verdana nie zostanie znaleziona na komputerze użytkownika jak widzisz, arkusze stylu uwzględniają nawet ewentualny brak zaplanowanej przez twórcę strony czcionki). Styl czcionki zostanie zastosowany także do tekstu umieszczonego między znacznikami <p> i <div>, natomiast tekst umieszczony w komórkach tabeli wymaga odrębnej definicji stylu. W jaki sposób w jednej definicji stylu określić kilka właściwości? Jeśli chciałbyś zdefiniować w definicji stylu kilka właściwości, musisz je rozdzielać średnikami, tak jak w poniższym wyrażeniu przykładowym, w którym do tekstu stosowane jest wyrównanie i kolor: p {text-align: center; color: red} Aby definicja była bardziej czytelna, każdą z właściwości możesz umieszczać w osobnym wierszu: { p text-align: center; color: black; font-family: arial } Czy jedną właściwość można przypisać kilku elementom? W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są przecinkami. Oto przykład definicji, w której wszystkim poziomom nagłówka (od h1 do h6) przypisany zostaje kolor czerwony: h1, h2, h3, h4, h5, h6 { color: red } Czy jednemu elementowi można przyporządkować różne style? Powiedzmy, że chcesz w swoim dokumencie zastosować do akapitów dwa różne sposoby wyrównania tekstu: pewne akapity chcesz dosunąć do prawego marginesu, a pozostałe 45

46 wycentrować. W takim przypadku przydatny będzie atrybut class. Pozwala on zdefiniować różne style dla tego samego elementu inaczej mówiąc pozwala zdefiniować klasy stylu. Klasę określa się w taki oto sposób: element.nazwa_klasy{właściwość: wartość} W naszym przykładzie musimy więc zdefiniować dwie klasy: pierwsza, nazwijmy ją prawy, w której ustawimy sposób wyrównania tekstu do prawego marginesu, i klasa center, w której tekst jest wyśrodkowany: p.prawy {text-align: right} p.center {text-align: center} Teraz wystarczy wstawić nazwę klasy do tych znaczników, w których chcemy mieć określony sposób formatowania i gotowe: <p class="prawy"> Ten akapit zostanie wyrównany do prawej. </p> <p class="center"> Ten akapit zostanie wyśrodkowany. </p> Nazwy klas mogą być dowolne, pamiętaj jednak, by nie stosować w nich polskich liter. Nazwę selektora w definicji klasy można pominąć:.nazwa_klasy{właściwość: wartość} Wówczas zdefiniowany zostanie styl, który można zastosować do wielu elementów. W przykładzie przedstawionym poniżej klasa prawy została zastosowana zarówno do elementu h1, jak i do akapitu p: <h1 class="prawy"> Ten nagłówek został wyrównany do prawego marginesu. </h1> <p class="prawy"> Ten akapit został wyrównany do prawego marginesu. </p> Czy można narzucić styl pojedynczym wystąpieniom danego elementu? Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Atrybut id pozwala więc oznaczać elementy podobnie jak atrybut class id jest czymś w rodzaju identyfikatora elementów. Nazwa atrybutu id musi być jednoznaczna. W dokumencie może istnieć tylko jeden element o danym id: <p id="wstep"> Do tego akapitu zostaną zastosowane ustawienia stylu zdefiniowane w definicji id o nazwie wstep. </p> 46

47 Atrybut id można zdefiniować na dwa sposoby: tak, by styl stosowany był do dowolnego elementu o określonym id lub tak, by styl był stosowany do określonego elementu o danym id. Ta definicja stanowi, że styl zostanie zastosowany do każdego elementu oznaczonego identyfikatorem wstep: #wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } A oto drugi przypadek. Tutaj styl będzie zastosowany tylko do elementu p o id= wstep : p#wstep { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } Zwróć uwagę, że w obu przypadkach ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak: #nazwa_id. Komentarze CSS Definicje stylu nie zawsze są proste, a nawet jeśli są, nie zawsze pamiętamy dlaczego wybraliśmy takie, a nie inne właściwości. Aby zabezpieczyć się przed skutkami niepamięci wstecznej, stosuj komentarze. Będą bardzo przydatne przy przyszłej edycji arkusza stylów. Jaką postać ma komentarz CSS? Komentarz CSS rozpoczyna się od znaku prawego ukośnika, nim pojawia się gwiazdka, potem tekst komentarza i wreszcie zamknięcie komentarza gwiazdką i ukośnikiem. Oto przykład: /* To jest komentarz CSS */ p { text-align: right; /* To też jest komentarz CSS */ 47

48 color: green; font-family: arial } Styl wpisany Informacje ogólne na temat arkuszy stylów sprawdzimy teraz w praktyce. Zaczniemy od zdefiniowania stylu wpisanego. Co to jest styl wpisany? Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki. Jeśli chcesz na przykład zastosować kursywę do zawartości znacznika <h1>, odpowiednią informację musisz umieścić w tym właśnie znaczniku. Ogólna postać definicji stylu wpisanego jest taka: <znacznik style= definicja > Oto przykład: <h1 style="font-size: 20pt; font-weight: bold; font-family: Arial, sans-serif">treść tytułu</h1> Styl wpisany powinien być stosowany tylko wtedy, gdy konieczne jest zastosowanie specyficznego stylu do pojedynczego wystąpienia danego elementu, z reguły tylko tam, gdzie niezbędne są drobne korekty stylu. Nie spełnia on bowiem zasadniczego celu kaskadowego arkusza stylów, a więc globalnej kontroli stylu całej strony. Jak zdefiniować w dokumencie html styl wpisany? Aby lepiej zrozumieć o co tu chodzi, sformułujmy razem taką lokalną definicję stylu. Otwórz w edytorze kod źródłowy szkieletu strony mojastrona.html lub wpisz go ręcznie. Między znacznikami <body> </body> wstaw parę akapitów tekstu. Zdefiniuj w wybranych akapitach inny rozmiar czcionki użyj do tego celu właściwości font-size (w końcowej części rozdziału znajdziesz wyjaśnienia wykorzystywanych tu właściwości patrz tabele 4.1 i 4.2). Możesz skorzystać z pomocy wydruku 4.1. Zapisz plik pod nazwą wpisany.html i otwórz stronę w oknie przeglądarki (patrz rysunek 4.1). Wydruk 4.1. Styl wpisany <html> <head> <title>styl wpisany</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <p style="font-size: 16pt" id="p16"> 48

49 Styl zastosowany w obrębie znacznika p.</p> <p>w tym akapicie nie zastosowano stylu.</p> <p style="font-size: 25pt" id="p25"> Styl zastosowano w obrębie znacznika p.</p> </p> <p> Zawartość tego znacznika p nie jest formatowana. </p> </body> </html> Rys Wpisany arkusz stylów oddziałuje tylko na znacznik, w którym umieszczono definicję stylu Wpisany arkusz stylów oddziałuje tylko na te akapity, w znacznikach których umieszczona została definicja stylu. Pozostałe akapity zachowują domyślne formatowanie. Osadzony arkusz stylów Co to jest osadzony arkusz stylów i jaką ma postać? Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami <style></style>. Element ten powinien znaleźć się w nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony. Oto przykład: 49

50 <head> <style type="text/css"> <--! hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/kot.gif")} --> </style> </head> Przeglądarka przeczyta te definicje stylów i sformatuje dokument zgodnie z nimi. Zwróć uwagę, że atrybut type znacznika <style> ma wartość text/css jest to dla przeglądarki informacja, że następne instrukcje to arkusz stylów. Instrukcje te zawarte są w znaczniku komentarza jest to zabezpieczenie na wypadek, gdyby strona trafiła do przeglądarki starego typu, która nie potrafi obsłużyć arkuszy stylów. Wówczas instrukcje formatowania zostaną zignorowane, a nie wyświetlone na ekranie jako tekst. Globalne formatowanie oznacza, że styl zostanie zastosowany do wszystkich instancji elementu, dla którego został zdefiniowany. Wyjątki od reguły? Tak, już o nich wspominaliśmy przy okazji omawiania klas i atrybutów id. W dalszej części rozdziału zobaczysz, jak w praktyce rozwiązać taki problem. Jak zdefiniować osadzony arkusz stylów? Aby utworzyć i przetestować osadzony arkusz stylów, otwórz edytor HTML i wpisz podstawowe znaczniki definiujące szkielet strony: <html>, <head> i <body>. Wstaw znaczniki <style> i </style> definicje stylów są umieszczane właśnie między nimi. Dodatkowe informacje na temat zasad tworzenia definicji stylów znajdziesz we wstępie do tego rozdziału. Możesz też skorzystać z definicji zawartych na wydruku 4.2. Wydruk 4.2. Osadzony arkusz stylów <html> <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!-- body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} --> </style> 50

51 </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> </body> </html> Zapisz plik pod nazwą osadzony.html i wyświetl dokument html w przeglądarce (patrz rysunek 4.2). Rys Osadzony arkusz stylów określa style na całej stronie Skąd się wzięła taka postać strony? Jak już wspomniałam, osadzony arkusz stylów definiuje style dla całego dokumentu. Definicja stylu z wydruku 4.2: <style type="text/css"> <!-- body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} 51

52 h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} --> </style> definiuje domyślny wygląd całej sekcji body, lecz narzuca specyficzne ustawienia dla wszystkich nagłówków h2 (w przeciwnym razie do nagłówków zastosowane zostałyby także ustawienia sekcji body wynika to z zasady dziedziczenia ustawień stylu przez elementy podrzędne) i dodatkowe dla wszystkich akapitów p. Odnośnie sekcji body stanowi ona, że: Tło strony będzie koloru niebieskiego decyduje o tym wartość właściwości background: #0000FF. Symbol, #0000FF, to kod koloru. Zamiast niego możesz użyć nazwy koloru, blue. Kody kolorów znajdziesz w dodatku D. Tekst dokumentu (akapitów i nagłówków) będzie koloru żółtego. Określa to para: color: #FFFF00 (wynika stąd, że nagłówki h2 powinny być pisane czcionką żółtą, lecz my chcemy czerwoną na białym tle i dlatego musimy przygotować specjalną definicję stylu dla h2). Z obu stron pojawią się marginesy o szerokości 2 cm: margin-left: 2cm; marginright: 2cm. Jeśli chodzi o nagłówki h2, definicja stylu określa, że: Czcionka ma mieć rozmiar 20 (bo font-size: 20pt). Tekst ma pojawiać się na białym tle i ma być koloru czerwonego: color: #FF0000; background: #FFFFFF. Do akapitów z kolei zastosowane zostaną domyślne ustawienia zawarte w definicji stylów sekcji body, a więc marginesy i kolor tekstu. Dodatkowo jednak: Narzucony zostanie rozmiar czcionki font-size: 14pt. oraz wcięcie pierwszego wiersza: text-indent: 4cm. Jak widzisz, pomimo tajemniczego wyglądu, osadzony arkusz stylów nie jest wcale tak tajemniczy. Wyjaśnienia dotyczące stosowania właściwości odnoszących się do czcionki i tekstu znajdziesz w tabelach 4.1 i 4.2. W jaki sposób do jednej instancji elementu zastosować inny styl? Powiedzmy więc, że chcesz, aby jeden z akapitów tekstu miał zupełnie inne formatowanie niż pozostałe. Realizacja tego jest prosta, jeśli skorzystamy z atrybutu id (patrz informacje wstępne do tego rozdziału). Na wydruku 4.3 przedstawiony został kod źródłowy dokumentu z wydruku 4.2, w którym jednemu z akapitów zmieniono styl. Akapitowi przypisano identyfikator id= wyjatek, a styl #wyjatek dołączono do listy definicji stylów w elemencie style. Zgodnie z definicją, tekst pojawi się na białym tle i będzie koloru czerwonego. Pozostałe ustawienia stylu akapitu zostaną zachowane. Wygląd strony pokazany został na rysunku 4.3. Wydruk 4.3. Osadzony arkusz stylów, w którym wykorzystano atrybut id <html> 52

53 <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!-- body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm} #wyjatek {color: #FF0000; background: #FFFFFF} --> </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p id="wyjatek">ten akapit pojawi się na białym tle, a czcionka będzie koloru czerwonego. Oznaczyliśmy go bowiem atrybutem id. Pozostałe ustawienia zostaną zachowane. </p> <p> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. </p> </body> </html> 53

54 Rys Osadzony arkusz stylów określa style na całej stronie, lecz można spod jego działania wyłączyć określone instancje elementu Jak zastosować w dokumencie klasy? Czas już, aby przyjrzeć się klasom od strony praktycznej (wstępne informacje na temat klas znajdziesz na początku tego rozdziału). Sformułujmy najpierw problem: chcemy, aby akapity tekstu były wyrównywane naprzemiennie raz do prawego, a raz do lewego marginesu. Zgodnie z tym, co już wiemy o klasach, musimy zdefiniować dwie klasy nazwiemy je prawa i lewa a ich definicje wstawić do elementu style. Otwórz więc plik osadzony.html w edytorze tekstu i dodaj w nim jeszcze kilka akapitów tekstu, aby efekt dywersyfikacji wyrównania akapitów po zastosowaniu klas stał się lepiej widoczny. Zdefiniujmy nasze klasy skorzystamy w nich z właściwości text-align, która umożliwia określenie sposobu wyrównania tekstu:.lewa {text-align: left}.prawa {text-align: right} Umieśćmy klasy tam, gdzie ich miejsce w sekcji head, między znacznikami <style></style>. Pozostaje jedynie oznaczyć elementy strony, do których zastosujemy klasy stylu w znacznikach <p> trzeba dodać atrybut class i przypisać mu odpowiednie wartości: prawa lub lewa. Szczegóły tej operacji znajdziesz na wydruku 4.4. Wydruk 4.4. Osadzony arkusz stylów i klasy <html> <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> 54

55 <style type="text/css"> <!-- body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm}.lewa {text-align: left}.prawa {text-align: right} --> </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p class="lewa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </p> <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class="left"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </p> </body> </html> 55

56 Efekty możesz podziwiać na rysunku 4.4. Rys Klasy pozwalają modyfikować właściwości arkusza stylów Zwróć uwagę, że w definicjach klas nie użyliśmy nazwy elementu postać definicji to.lewa {text-align: left} i.prawa {text-align: right}, a nie p.lewa {text-align: left} i p.prawa {textalign: right}. Ta druga forma jest także prawidłowa, lecz mniej ogólna dotyczyłaby tylko elementów p. Ogólna postać pozwala nam skorzystać z klas także w przypadku stosowania wyrównania do innych elementów, na przykład do nagłówków. Zewnętrzny arkusz stylów Kiedy stosowany jest zewnętrzny arkusz stylów? Zewnętrzny (lub inaczej: łączony) arkusz stylów to doskonałe rozwiązanie dla witryn, czyli układów wielu stron. Wówczas te same style mogą być stosowane do wszystkich stron witryny. Jeśli przyjdzie Ci ochota zmienić wygląd swojej witryny, wprowadzisz zmiany tylko w pliku arkuszy stylów, a zmiany zostaną automatycznie uwzględnione na wszystkich stronach. Zewnętrzny arkusz stylów rezyduje zgodnie z nazwą poza dokumentem html, w zewnętrznym pliku o rozszerzeniu nazwy.css. Jak wygląda zewnętrzny arkusz stylów? W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi zostać zdefiniowane połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje się za pomocą znacznika <link>, który umieszczany jest w sekcji head dokumentu: <head> <link rel="stylesheet" type="text/css" href="mojestyle.css"> </head> 56

57 Definicje stylów rezydują w pliku mojestyle.css nazwa pliku może być dowolna, ale musi mieć rozszerzenie.css. Przeglądarka odczyta plik i sformatuje dokument zgodnie z zawartymi w nim instrukcjami. W znaczniku <link> musi znaleźć się atrybut rel o wartości stylesheet. Dzięki temu przeglądarka będzie wiedziała, że atrybut href podaje jej adres URL pliku, który zawiera arkusz stylów. Jak przygotować plik.css? Plik.css można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników HTML. Oto przykład zawartości: hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/obraz.gif")} Jak w praktyce zastosować zewnętrzny arkusz stylów? Przećwiczmy stosowanie zewnętrznego arkusza stylów na przykładzie dokumentu z wydruku 4.4. W dokumencie tym stosowany jest osadzony arkusz stylów. Wyrzucimy z kodu źródłowego strony element style, w którym znajdują się definicje stylów, i zastąpimy go znacznikiem <link> z odpowiednimi atrybutami. Najpierw jednak przygotujmy plik zawierający arkusz stylów. Otwórz edytor i wyświetl w nim kod dokumentu z wydruku 4.4. Wytnij z niego definicje stylów i wklej wycięty fragment kodu do nowego okna. Jego zawartość powinna być taka jak na wydruku 4.5. Zapisz plik na przykład pod nazwą zewnetrzny.css (bez polskich liter i z rozszerzeniem.css). Wydruk 4.5. Zewnętrzny arkusz stylów body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm}.lewa {text-align: left}.prawa {text-align: right} Wróć do dokumentu HTML, w którym chcesz zastosować plik zewnętrzny. W obrębie znaczników <head></head>, poniżej znacznika <title> (przy okazji zmień też tytuł strony) wprowadź następujący wiersz kodu: <link rel=stylesheet href= zewnetrzny.css type= text/css > Znacznik <link> wskazuje plik zawierający zewnętrzny arkusz stylów. Oczywiście nazwa pliku będzie taka, jaką zadeklarowałeś zapisując zewnętrzny arkusz stylów. Atrybut href podaje adres URL, pod którym plik rezyduje. Musisz więc pamiętać o poprawnym zdefiniowaniu połączenia do pliku zewnętrznego (patrz rozdział6., Połączenia). Kompletny nagłówek wygląda teraz tak: <head> <title>zewnętrzny arkusz stylów</title> 57

58 <meta http-equiv="content-type" content="text/html; charset=iso "> <link rel=stylesheet href="zewnetrzny.css" type="text/css"> </head> Zapisz plik i wyświetl go w przeglądarce. Prezentuje się identycznie jak plik korzystający z arkusza osadzonego nic dziwnego, w końcu zewnętrzny arkusz stylów zawiera zestaw tych samych definicji tylko tytuł na pasku tytułu uświadamia nam, że to nie ta sama strona (patrz rysunek 4.5). Rys Na stronie korzystającej z zewnętrznego arkusza stylów umieszczane jest odwołanie do pliku zawierającego definicje stylów; przedłużenie nazwy tego pliku to.css Rozciąganie stylu Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników <span> </span>. Co umożliwia element span? Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span jest następująca: <span style= definicja_stylu > </span> W jaki sposób zastosować element span w kodzie HTML? Powiedzmy, że w dokumencie z wydruku 4.4 chcesz w drugim z nagłówków wyraz formatowanie napisać wielkimi literami w kolorze niebieskim, a cały wyraz podkreślić. 58

59 Co robimy? Obejmujemy znacznikami <span> </span> żądany wyraz (lub frazę) w naszym przypadku wyraz znajduje się w obrębie nagłówka h2, i umieszczamy w znaczniku otwierającym <span> atrybut style, któremu przypisujemy odpowiednie właściwości. Rzuć okiem na wydruk 4.6. Skuteczność metody prezentuje rysunek 4.6. Wydruk 4.6. Wykorzystanie elementu span <h2>ten nagłówek ma takie samo <span style="font-variant: small-caps; color:blue; textdecoration: underline">formatowanie</span> jak poprzedni</h2> Rys Element span pozwolił na wyróżnienie jednego wyrazu w drugim z nagłówków formatowanym za pomocą arkuszy stylów Czy zmieniając formatowanie przy użycie elementu span można korzystać z klas? Stosowanie klas z elementem span jest oczywiście możliwe. Powiedzmy, że chcesz na swojej stronie WWW pierwszy wyraz wszystkich akapitów pisać czcionką o innym rozmiarze i w innym kolorze niż pozostały tekst. Otwórz w edytorze plik z wydruku 4.4 (lub otwórz plik zawierający arkusze stylów) i dodaj w sekcji head jeszcze jedną definicję klasy. Nazwijmy ją kolorowa:.kolorowa {font-size: 24pt; color: #FFFFFF} Definiuje ona czcionkę o rozmiarze 24 pt w kolorze białym. Trzeba teraz objąć znacznikami <span> </span> pierwsze wyrazy wszystkich akapitów i wstawić w znacznikach otwierających atrybut class przypisując mu jako wartość nazwę utworzonej klasy. Przeanalizuj pełny kod dokumentu na wydruku 4.7. Aktualny wygląd strony prezentuje rysunek 4.7. Wydruk 4.7. Wykorzystanie elementu span <html> 59

60 <head> <title>osadzony arkusz stylów</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!-- body {background: #0000FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm}.lewa {text-align: left}.prawa {text-align: right}.kolorowa {font-size: 24pt; color: #FFFFFF} --> </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p class="lewa"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class="prawa"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </p> <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class="left"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class="prawa"> <span class="kolorowa">tekst </span>jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </p> </body> 60

61 </html> Rys Element span pozwolił na wyróżnienie pierwszego wyrazu każdego akapitu skorzystaliśmy tu z klasy, aby nie powtarzać wielokrotnie definicji stylu Wydzielone bloki Istnieje jeszcze jedna metoda pozwalająca na nadawanie blokom dokumentu innego stylu. Na sposób ten warto zwrócić szczególną uwagę, gdyż jest on często wykorzystywany w dokumentach dynamicznych (a więc tworzonych przy wykorzystaniu języka DHTML). Bloki wydzielamy za pomocą pary znaczników <div> </div>. Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej poprzednio, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów. Jaki efekt daje stosowanie elementu div? Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym znacznikami <div> </div>. Sprawdź to, wydzielając w dokumencie fragment tekstu (patrz wydruk 4.8 fragment wydzielony za pomocą elementu div został oznaczony czcionką pogrubioną). Efekt działania elementu div pokazuje rysunek 4.8. Wydruk 4.8. Wykorzystanie elementu div <html> 61

62 <head> <title>element div</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!-- body {background: #3366FF; color:#ffff00; margin-left: 2cm; margin-right: 2cm} h2 {font-size: 20pt; color: #FF0000; background: #FFFFFF} p {font-size: 14pt; text-indent: 4cm}.lewa {text-align: left}.prawa {text-align: right} --> </style> </head> <body> <h2>czerwony nagłówek na białym tle</h2> <p class="lewa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class="prawa"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka.<div style="font-size:11pt; color: #000000"> Fragment dokumentu objęty znacznikami div można w swobodny sposób formatować za pomocą stylów. Jest to metoda podobna do omawianej w przypadku elementu span, ale w tym przypadku wydzielone fragmenty dokumentu są zazwyczaj większe. Mogą one zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów.</div> </p> <h2>ten nagłówek ma takie samo formatowanie jak poprzedni</h2> <p class="left"> Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu. </p> <p class="prawa"> 62

63 Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu. </p> </body> </html> Rys Element div umożliwia wydzielenie fragmentów dokumentu i narzucenie im innego formatowania Przykłady stylów CSS dla tła strony WWW W tej części rozdziału znajdziesz proste recepty zaspokajające podstawowe potrzeby odnośnie arkuszy stylów CSS. Na ich podstawie będziesz mógł tworzyć własne definicje. Jak zdefiniować kolor tła elementu? Ten przykład nauczy Cię określać dla danego elementu inne tło niż tło całej strony możesz na przykład zmienić tło dla obszaru tekstu lub nagłówka. Wydruk 4.9 pokazuje jak zróżnicować tło strony i elementu, a na rysunku 4.9 zobaczysz jakie to daje efekty. Wydruk 4.9. Tło strony i elementu <html> <head> 63

64 <title>kolor tła elementu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} </style> </head> <body> <h1>nagłówek na zielonym tle</h1> <h2>nagłówek na transparentnym tle</h2> <p class="magenta">tekst tego akapitu umieszczono na tle w kolorze fioletowym! Zwiększono rozmiar czcionki do 16. Wszystko to dzięki klasie o nazwie magenta.</p> <p>ten akapit ma żółte tło, bo tak stanowi styl elementu body.</p> </body> </html> Rys Inne tło strony i elementów Oto znaczenie poszczególnych definicji stylów: 64

65 body {background-color: yellow} tło sekcji body będzie żółte. h1 {background-color: #00ff00} nagłówki h1 mają być umieszczane na tle w kolorze zielonym. h2 {background-color: transparent} wszystkie nagłówki h2 mają tło transparentne (to daje na przykład możliwość umieszczania tekstu na tle obrazu). p.magenta {font-size: 16pt; background-color: rgb(250,0,255)} utworzono klasę o nazwie magenta, która umożliwia zmianę tła wybranych akapitów na kolor magenta. Dodatkowo zwiększono rozmiar czcionki. Jak zdefiniować obraz jako tło? Na wydruku 4.10 znajdziesz definicję stylu CSS, dzięki której będziesz mógł jako tło strony zastosować obraz. Rysunek 4.10 pokazuje efekt. Wydruk Obraz jako tło strony <html> <head> <title>obraz jako tło strony</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/obraz.jpg") } </style> </head> <body> <p>tu umieszczasz resztę zawartości swojej strony!</p> </body> </html> 65

66 Rys Obraz jako tło strony możesz na nim umieszczać tekst i inne elementy strony Oto znaczenie definicji stylów: {background-image: url("images/obraz.jpg")} adres URL określa ulokowanie obrazu stanowiącego tło strony. W tym przypadku umieszczono go w folderze images (nazwa jest oczywiście dowolna) utworzonym w folderze przechowującym plik strony WWW. Jak zbudować tło strony z powtórzeń obrazu? Oto definicja, która pozwala zbudować tło z mniejszych obrazów powtórzonych w pionie (patrz wydruk 4.11). Rysunek 4.11 prezentuje ten ciekawy efekt. Wydruk Budowanie tła z powtórzeń obrazu <html> <head> <title>budowanie tła z powtórzeń obrazu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: repeat-y 66

67 } </head> <body> </body> </html> Rys Tło zostało zbudowane z powtórzeń w pionie niewielkiego obrazu Oto znaczenie definicji stylów: {background-image: url("images/kot.gif"); background-repeat: repeat-y} adres URL określa ulokowanie obrazu, który zostanie powtórzony w kolumnie z lewej przy lewej krawędzi strony. Powtórzenia definiuje właściwość backgroundrepeat: repeat-y. Gdybyś chciał umieścić pasek tła w poziomie, użyj właściwości background-repeat: repeat-x. background-repeat: repeat spowoduje pokrycie całej powierzchni powtórzeniami. Jak umiejscowić na stronie obraz stanowiący tło? Czasami obraz stanowiący tło strony wcale nie pokrywa jej całkowicie. Najczęściej wynika to z układu strony i daje całkiem interesujące rezultaty. Tak więc, nawet niewielki obraz można zastosować jako tło. Postać definicji stylów znajdziesz na wydruku 4.12, a na rysunku 4.12 zobaczysz jak to wygląda w praktyce. Wydruk Umiejscawianie obrazu-tła na stronie <html> 67

68 <head> <title>mały obraz w centrum strony</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> body { background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center center } </style> </head> <body> <p> <b>uwaga:</b> Netscape 4 nie obsługuje właściwości "background-position". </p> </body> </html> 68

69 Rys Tło zostało zbudowane z powtórzeń w pionie niewielkiego obrazu Oto znaczenie definicji stylów: {background-image: url("images/kot.gif"); background-repeat: no-repeat; background-position: center center} w tej definicji użyto właściwości: o background-repeat: no-repeat wartość no-repeat określa, że obraz stosowany jako tło strony nie będzie powtarzany. o background-position: center center dzięki takiemu ustawieniu tej właściwości obraz znalazł się w centralnym punkcie strony. Gdybym chciała umieścić go, powiedzmy, w połowie lewej krawędzi, użyłabym wyrażenia backgroundposition: center left (inne możliwości to top left, top center, top right, center right, bottom left, bottom center, bottom right). Wyspecyfikowanie tylko jednego słowa kluczowego spowoduje, że jako drugie domyślnie zostanie przyjęte słowo center. A jeśli konieczne byłoby ulokowanie obrazu-tła gdzieś w innym, określonym miejscu strony, skorzystałabym z takiej definicji: background-position: 20% 80% lub bacground-position: 0px,0px. Te tajemnicze pary wartości center, left, 20% czy 80% to po prostu współrzędne określające ulokowanie obrazu-tła w poziomie i pionie. Lewy górny narożnik ma współrzędne 0%,0% lub 0px,0px. Jednostki można mieszać. 69

70 Atrybuty stylu odnoszące się do tekstu Style CSS definiujące krój, kolor, rozmiar i styl czcionki są bardzo często stosowane. Zmiana koloru tła zazwyczaj wymaga dostosowania koloru tekstu, aby był on czytelny. Konieczność zdefiniowania parametrów tekstu wynika także z potrzeby zabezpieczenia się na wypadek braku u użytkownika takich czcionek, jakie zaplanowałeś na swojej stronie WWW. No i oczywiście powód najważniejszy przecież jednym z podstawowych zamiarów twórcy dokumentu html jest nadanie mu atrakcyjnej postaci, a ma na to wpływ także wygląd i układ tekstu. Co należy wiedzieć o czcionce, aby napisać definicję jej stylu? Czcionki to znaki, które można wyświetlić na ekranie lub wydrukować. Mogą mieć krój na pewno słyszałeś takie nazwy jak, np. Arial, Times New Roman czy Helvetica; to są właśnie różne kroje pisma, mają specyficzne wykończenia nazywa je się wówczas czcionkami szeryfowymi lub są tych wykończeń pozbawione, jak czcionki bezszeryfowe. Cechy czcionki to także jej rozmiar jest to wysokość podawana w punktach (gdzie jeden punkt to około 1/29 centymetra) i styl (kursywa, pogrubiona, podkreślona). Tekst charakteryzują też odstępy pomiędzy znakami. Czcionki szeryfowe (serif) to czcionki z wykończeniami liter i cyfr. Dodatkowe elementy zaokrąglające i wykańczające pełnią nie tylko funkcję dekoracyjną, ale też ułatwiają czytanie. Stąd też czcionki szeryfowe najczęściej stosuje się do tekstu podstawowego, a rzadziej do tytułów. Przykładem takiej czcionki jest Times New Roman. Czcionki bezszeryfowe (sans serif) pozbawione są dodatkowych ornamentów, a stosuje je się zazwyczaj do nagłówków i małych bloków tekstu. Przykładem czcionki bezszeryfowej jest Arial. Jak zdefiniować arkusz stylów formatujący tekst? Proces definiowania arkusza stylów wymaga więc w przypadku tekstu określenia poszczególnych cech pisma. Zacząć należy od kwestii najważniejszej od wskazania rodziny czcionek (arkusze stylów rozpoznają następujące rodziny czcionek: serif, sans serif, cursive, fantasy i monospace) i podania nazwy czcionki lub ciągu nazw alternatywnych (z przecinkami) wówczas w przypadku braku czcionki podstawowej, zastosowana zostanie pierwsza alternatywna, a gdy tej także nie będzie, kolejna alternatywna, itd. Jeśli nazwa czcionki składa się z kilku wyrazów, np. Goudy Old Style, w definicji stylu powinna być podana w cudzysłowach: font-family: times, goudy old style. W dalszej kolejności definiowane są kolejne atrybuty. Oddzielasz je średnikami. Czy sposób podawania atrybutów jest ważny? Kolejność atrybutów jest istotna. Atrybuty grubości czcionki font-weight, i stylu fontstyle, muszą pojawić się przed innymi atrybutami czcionki, a rozmiar czcionki font-size, poprzedza odstępy. Wartości atrybutów nie oddziela się przecinkami jedyny wyjątek to rodziny czcionek. Wydruk 4.13 prezentuje osadzony arkusz stylów dla h1 i h2, w których zdefiniowano krój czcionek (font-family), styl (font-style) oraz rozmiar (font-size). Wydruk Formatowanie tekstu <style> <!-- 70

71 h1 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 20pt} h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal; font-size: 14pt} --> </style> Jak zachować porządek w definicjach stylów CSS? W definicjach stylu powinien być porządek. Nie wynika to wcale ze względów estetycznych, lecz z praktycznych. Organizacja stylów pozwoli zredukować liczbę definicji, a co najważniejsze, ułatwi wprowadzanie ewentualnych modyfikacji stylów. O potrzebie grupowania elementów, do których stosowane będą te same właściwości, już była mowa. Teraz czas na konkretny przykład. Przyglądając się sekcji <style> z przykładu pokazanego na wydruku 4.13 zauważysz, że dla nagłówków h1 i h2 większość atrybutów jest identyczna. Różnica dotyczy jedynie wielkości czcionki. Zapiszmy więc naszą obserwację w postaci kodu. Wydzielmy to, co różni sposób formatowania elementów h1 i h2, a cechy identyczne przedstawmy w jednej definicji wspólnej dla obu (patrz wydruk 4.14). Pomimo zmiany postaci sekcji style jest ona teraz znacznie prostsza w odbiorze, wygląd tekstu pozostanie taki sam (patrz rysunek 4.13). Wydruk Grupowanie stylów identyczne atrybuty stylu przyporządkowano różnym elementom. <style> <!-- h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} h1 {font-size: 20pt} h2 {font-size: 14pt} --> </style> Rys Po uporządkowaniu definicji stylów efekt wizualny jest taki sam, a kod dokumentu znacznie się uprościł 71

72 Nie tylko elementy można grupować, lecz także atrybuty. Na przykład długą definicję body: body {font-family: arial, sans-serif; font-style: normal; font-size: 12pt; line-height: 14pt; fontweight: bold} można zapisać w następujący sposób: body {font: bold 12/14pt arial, sans-serif} Jakie są najczęściej stosowane atrybuty tekstu? Listę najczęściej stosowanych atrybutów tekstu prezentuje tabela 4.1. Tabela 4.1. Podstawowe atrybuty umożliwiające zdefiniowanie stylu tekstu. Atrybut color: kontroluje kolor czcionki. font-family: kontroluje krój czcionki. font-size: - rozmiar czcionki. Przykład definicji h1 {color: #00ff00} tutaj kod koloru podany jest w zapisie szesnastkowym. Ostateczna postać kodu koloru w HTML-u to trzy liczby szesnastkowe połączone razem i poprzedzone znakiem #. h2 {color: red} jeśli korzystasz ze standardowych kolorów, możesz posługiwać się ich nazwami, np. red, blue, white czy green, zamiast kodami heksadecymalnymi. p {color: rgb(0,0,255)} każdemu kolorowi można przyporządkować kod RGB w postaci trzech liczb z przedziału Liczby określają natężenie barw podstawowych: czerwonej, zielonej i niebieskiej. W tym zapisie kod odpowiada kolorowi czarnemu, a białemu, kolor żółty to , a niebieski RGB daje do dyspozycji 16,7 milionów kolorów (24 bity). {font-family: times} podano nazwę czcionki Times, {font-family: times, arial} w tym przypadku podana została nazwa czcionki wraz z nazwą czcionki alternatywnej, {font-family: serif} tu wskazano rodzinę czcionek, dzięki czemu przeglądarka zastosuje czcionkę, której przynajmniej podstawowe atrybutu odpowiadają Twojemu wyborowi. {font-size: 12pt} w tej definicji rozmiar podany jest w punktach drukarskich. Jest to standard najczęściej stosowany. 72

73 font-style: - określa styl tekstu. font-weight: - określa grubość czcionki. text-decoration: - umożliwia określenie efektów dodatkowych. line-height: - definiuje wysokość wiersza. Rozmiar można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {font-style: italic} definiuje tekst pisany kursywą. {font-style: normal} przywraca ustawienia domyślne. {font-style: oblique} wprowadza pochylenie odmiany prostej danej czcionki. {font-weight; bold} definiuje czcionkę pogrubioną (do dyspozycji masz tu jeszcze atrybuty takie jak: extra-light, demi-light, medium, extra-bold oraz demi-bold). {text-decoration: none} brak efektów. {text-decoration: underline} podkreślenie. {text-decoration: italic} kursywa. {text-decoration: line-through} przekreślenie. p {line-height: 12pt} Odstępy między wierszami w akapicie można podawać w punktach, pikselach, calach, centymetrach i w procentach, podobnie jak wielkość czcionki. Jak definiować marginesy, wcięcia i wyrównanie tekstu? Oto kolejna porcja atrybutów grupa zgromadzona w tabeli 4.2 służy do określenia marginesów, sposobów wyrównania oraz wcięć. Tabela 4.2. Atrybuty formatowania akapitu. Atrybut margin-left określa szerokość lewego marginesu. margin-right określa szerokość prawego marginesu margin-top ustawienie marginesu górnego. text-indent ustawienie wcięcia. Jednostki takie jak dla marginesów. text-align opcja wyrównania tekstu. Przykład definicji {margin-left: 2cm} margines wynosi 2 cm. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {margin-right: 2in} tu ustawiono margines równy 2 cale. Szerokość marginesu można podawać w punktach (pt), pikselach (px), calach (in), centymetrach (cm) i w procentach (%). {margin-top: 20pt} margines górny wynosi 20 punktów. Jednostki są takie same jak w przypadku marginesów bocznych. {text-indent: 0.5in} wcięcie o głębokości 0.5 cala. Internet Explorer dopuszcza wcięcia ujemne wysunięcia. {text-align: right} tekst zostanie wyrównany do prawego marginesu. Atrybut może przyjmować wartości: left (do lewej), center (wyśrodkowanie), right (do prawej) i justify (do obu marginesów). 73

74 Atrybuty z tabeli 4.2 pozwalają kontrolować marginesy, wcięcia i wyrównanie tekstu decydują więc o wyglądzie akapitu. Jak w praktyce zastosować wszystkie zdobyte informacje o stylach CSS? Aby sprawdzić w praktyce zdobytą wiedzę, zacznij od przygotowania dokumentu pozbawionego formatowania. Zobaczymy jak wygląda w przeglądarce i zastanowimy się nad sposobami sformatowania go przy użyciu arkuszy stylów CSS. Otwórz w edytorze dokument mojastrona.html jak pamiętasz, zawiera on podstawowy kod dokumentu html i dodaj w nim nagłówki oraz akapity tekstu, tak jak na wydruku Zapisz plik, na przykład pod nazwą nostyle.html, i wyświetl go w przeglądarce (patrz rysunek 4.14). Wydruk Dokument html, w którym nie są stosowane arkusze stylów <html> <head> <title>tu nie stosujemy arkuszy stylów!</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <h1>windows XP!</h1> <h2>co będzie dalej?</h2> <p>już w tym roku czeka nas rewolucja w licencjonowaniu oprogramowania, zapowiadana przez firmę Microsoft w związku z premierami jednych z najważniejszych produktów przez nią sprzedawanych - systemu operacyjnego <A href="windows_xp.html" title="system Windows XXI wieku."> Windows XP</A> oraz pakietu biurowego <A href="office_xp.html" title="nowy pakiet Office.">Office XP</A>.</p> <p>pomysłem Billa Gatesa na ukrócenie piractwa i zmniejszenie strat firmy jest obowiązkowa telefoniczna rejestracja produktu przy każdej jego instalacji. Pomyślmy teraz, jak zareaguje rynek na taką sytuację. Czy nagle półki sklepów zostaną ogołocone z pudełek z programami ze znakiem Microsoft?</p> </body> </html> Rys W tym dokumencie nie są stosowane style CSS 74

75 Zawartość dokumentu z rysunku 4.14 jest czytelna, aczkolwiek wygląda nieatrakcyjnie. Zajmijmy się więc jej sformatowaniem. Wykorzystamy tu podstawowe informacje odnośnie formatowania czcionki, akapitu i tła dokumentu html. Powróćmy do pliku nostyle.html (patrz wydruk 4.15) i zdefiniujmy w nim osadzony arkusz stylów, który będzie formatował tło i marginesy strony, nagłówki tekstu oraz sam tekst. Wstaw więc w sekcji head element style ujęty w znacznikach komentarza html i wprowadź odpowiednie definicje formatowania wymienionych elementów strony. Pamiętaj, że na ekranie lepiej prezentuje się strona WWW, w której jest dużo wolnej przestrzeni, marginesy nie powinny więc być symboliczne. Oto przykładowa definicja stylów dla sekcji body: body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top: 1cm}. Wprowadza ona kolor tła jeśli chciałbyś, by tło było inne, wróć do serii przykładów definiowania tła strony z wcześniejszej części rozdziału, oraz marginesy w tabeli 4.2 znajdziesz wyjaśnienia stosowanych atrybutów oraz inne sposoby formatowania akapitu. W kolejnym kroku zajmiemy się nagłówkami. Pogrupujemy elementy, do których zastosowane zostanie to samo formatowanie: h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} oraz dodamy definicje specyfikujące właściwości o różnych wartościach: h1 {font-size: 20pt; text-align: left} h2 {font-size: 14pt; text-align: right} Następny etap to styl akapitu. Określimy krój czcionki, jej styl i rozmiar oraz wysokość wiersza inne właściwości znajdziesz w tabeli 4.1: p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; line-height: 16pt} 75

76 Aby zastosować do akapitów różne sposoby wyrównania, możesz skorzystać z klas zajmowaliśmy się już takim rozwiązaniem tej kwestii lub użyć w elemencie p stylu wpisanego: <p style="text-align: left"> Możesz także inaczej sformatować połączenia, na przykład pozbawiając je domyślnego podkreślenia, w zamian stosując czcionkę pogrubioną (już najwyższa pora, by zacząć mówić o połączeniach poświęcony jest im rozdział 6.): a {text-decoration: none; font-weight: bold} Wydruk 4.16 prezentuje kod html naszego dokumentu, w którym uwzględnione zostały wszystkie omawiane zmiany. Po sformatowaniu dokument prezentuje się zupełnie inaczej. Aby się o tym przekonać, zapisz go i obejrzyj w przeglądarce (patrz rysunek 4.15). Wydruk arkuszy stylów Dokument html, w którym sformatowano tekst i tło przy wykorzystaniu <html> <head> <title>style tekstu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style> <!-- body {background-color: yellow; margin-left: 3cm; margin-right:3cm; margin-top: 1cm} h1, h2 {font-family: verdana, helvetica, arial, sans-serif; font-style: normal} h1 {font-size: 20pt; text-align: left} h2 {font-size: 14pt; text-align: right} p {font-family: goudy, times, serif; font-style: normal; font-size: 12pt; line-height: 16pt} a {text-decoration: none; font-weight: bold} --> </style> </head> <body> <h1>windows XP!</h1> <h2>co będzie dalej?</h2> 76

77 <p style="text-align:left">już w tym roku czeka nas rewolucja w licencjonowaniu oprogramowania, zapowiadana przez firmę Microsoft w związku z premierami jednych z najważniejszych produktów przez ni± sprzedawanych - systemu operacyjnego <A href="windows_xp.html" title="system Windows XXI wieku.">windows XP</A> oraz pakietu biurowego <A href="office_xp.html" title="nowy pakiet Office.">Office XP</A>.</p> <p style="text-align:right">pomysłem Billa Gatesa na ukrócenie piractwa i zmniejszenie strat firmy jest obowiązkowa telefoniczna rejestracja produktu przy każdej jego instalacji. Pomyślmy teraz, jak zareaguje rynek na taką sytuację. Czy nagle półki sklepów zostaną ogołocone z pudełek z programami ze znakiem Microsoft?</p> </body> </html> Rys Oto dokument po dodaniu formatowania za pomocą stylów CSS Pomyśl, jak prosta teraz będzie modyfikacja formatowania, nawet jeśli dokument znacznie się rozrośnie! Najważniejsze informacje Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają korzystać ze stylów złożonych, które przeglądarka zinterpretuje w określonym porządku zwanym kaskadą. Arkusze stylów mogą być stosowane w odniesieniu do konkretnego elementu html wówczas mówimy o stylu wpisanym, w odniesieniu do całego dokumentu html 77

78 takie arkusze stylów nazywa się osadzonymi, lub mogą rezydować w pliku zewnętrznym wtedy jest to zewnętrzny lub łączony arkusz stylów. Atrybut style pozwala zastosować arkusz stylów do konkretnego elementu. Ogólna postać stylu wpisanego jest następująca: <znacznik style= właściwość: wartość; > Styl wpisany jest wprowadzany w wybranym znaczniku i nie ma wpływu na pozostałe znaczniki. Osadzony arkusz stylów to definicja stylu umieszczona między znacznikami <style></style>. Element style powinien znaleźć się w nagłówku dokumentu: <head> <style type="text/css"> <--! selektor{właściwość: wartość} --> </style> </head> Selektorem nazywa się definiowany znacznik czy też element, właściwość to jego atrybut. Właściwość i wartość rozdzielone są dwukropkiem oraz zawarte w nawiasach klamrowych. Aby zdefiniować w definicji stylu kilka właściwości, należy je rozdzielać średnikami. Na przykład: p {text-align: center; color: red} Znaczniki komentarza html obejmują wszystkie znaczniki i właściwości CSS dzięki temu przeglądarki, które nie potrafią obsługiwać arkuszy stylów, potraktują kod jako komentarz. W definicji stylu elementy (inaczej selektory) można grupować. Selektory w grupie oddzielane są przecinkami. Na przykład: h1, h2 {color: red} Atrybut class pozwala zdefiniować różne style dla tego samego elementu inaczej mówiąc pozwala zdefiniować klasy stylu. Klasa to szeroko zdefiniowany styl, który określa właściwości dla pewnych lub wszystkich elementów dokumentu. Ogólna postać definicji klasy jest następująca: element.nazwa_klasy{właściwość: wartość} Nazwy klas mogą być dowolne, nie należy jednak stosować w nich polskich liter. W definicji klasy można pominąć nazwę selektora:.nazwa_klasy{właściwość: wartość} co umożliwia stosowanie klasy do różnych elementów. 78

79 Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Atrybut ten powinien mieć jednoznaczną nazwę. Atrybut id pozwala oznaczać elementy podobnie jak atrybut class id jest czymś w rodzaju identyfikatora elementów: <p id="nazwa"> Ustawienia stylu, które będą stosowane do elementów oznaczonych atrybutem id identyfikuje się nazwą atrybutu id poprzedzoną znakiem #, o tak: #nazwa_id Komentarze CSS są bardzo przydatne przy ewentualnej edycji arkusza stylów. Oto ich postać: /* To jest komentarz CSS */ Zewnętrzny arkusz stylów rezyduje poza dokumentem html, w zewnętrznym pliku o rozszerzeniu nazwy.css. W kodzie każdej ze stron korzystających z zewnętrznych arkuszy stylów musi zostać zdefiniowane połączenie do pliku zewnętrznego, który je zawiera. Połączenie to definiuje się za pomocą znacznika <link>, który umieszczany jest w sekcji head dokumentu <head>: <link rel="stylesheet" type="text/css" href="nazwa.css"> </head> Plik.css można utworzyć w dowolnym edytorze. Plik nie powinien zawierać znaczników HTML. Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu. Może ona zawierać elementy różnego typu na przykład tekst i listy. Ogólna postać definicji stylu wykorzystującej element span jest następująca: <span style= definicja_stylu > </span> Bloki wydzielamy za pomocą pary znaczników <div> </div>. Fragment dokumentu objęty nimi można w swobodny sposób formatować za pomocą stylów. Wydzielone fragmenty mogą zawierać nagłówki, akapity, listy, a nawet inne bloki. Pozwala to dzielić dokumenty na większe, logiczne fragmenty i nadawać im specyficzne formatowanie za pomocą stylów. Zazwyczaj przeglądarki wprowadzają łamanie wiersza przed i za fragmentem objętym znacznikami <div> </div>. 79

80 Rozdział 5. Obrazy w dokumencie HTML Gdzie wstawiać obrazy? Strona bez obrazów to smutna strona. Nawet strony traktujące o super poważnej tematyce zyskują na atrakcyjności, gdy znajdzie się na nich choćby malutki obrazek. Obrazy można wstawiać w odrębnym akapicie, wewnątrz tekstu lub w obszarze nagłówka wystarczy umieścić znacznik <img> wewnątrz odpowiedniego elementu. Jeśli chcesz, by obraz ubarwił nagłówek, umieść znacznik <img> między znacznikami nagłówka. Obrazy można wstawiać na stronie bezpośrednio lub zastępować je połączeniami prowadzącymi do odpowiednich plików. W tym drugim przypadku mówimy o obrazach zewnętrznych. Mając do dyspozycji połączenie czytelnik sam podejmuje decyzję, czy chce zobaczyć obraz. Obraz może także stanowić tło strony, lecz tym nie będziemy się tutaj zajmować. W rozdziale 4. znajdziesz parę przykładów stosowania obrazów jako tła. Jaką postać ma element img? Zacznij od tego, aby zobaczyć jak to robią inni. Przejrzyj zasoby sieciowe, wyświetl postaci źródłowe stron WWW i przyglądnij się znacznikowi <img>, bowiem on właśnie pozwala na wstawianie obrazów. Znacznik ten jest pusty oznacza to, że nie posiada znacznika zamykającego, ale ma szereg atrybutów, które kontrolują sposób prezentacji obrazu na stronie. Atrybuty te zostały zgromadzone w tabeli 5.1. Najważniejszym z nich jest atrybut src. Umożliwia on określenie ulokowania obrazu i zdefiniowanie jego nazwy. Wygląda to mniej więcej tak: <img src="url">. Dlaczego mniej więcej? Bo dokładna postać tego wyrażenia zależy od tego, gdzie umieściłeś obraz, oraz od jego formatu (to znaczy typu pliku). Co jest wartością atrybutu src? Wartością atrybutu src jest adres URL, który określa ulokowanie obrazu inaczej mówiąc jest to adres, pod którym obraz jest dostępny. Jeśli więc obraz o nazwie obraz.gif jest przechowywany w katalogu images witryny to bezwzględny adres URL będzie miał postać Adres względny zależeć będzie natomiast od ulokowania pliku html. Więcej informacji na temat adresowania znajdziesz w rozdziale 6. poświęconym połączeniom. Jak przeglądarka zinterpretuje znacznik <img>? Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element img. Jeśli znacznik <img> zostanie umieszczony między dwoma akapitami (definiowanymi za pomocą elementów p), to najpierw wyświetlony zostanie tekst pierwszego akapitu, potem obraz, a za nim tekst drugiego akapitu (patrz wydruk 5.1 i rysunek 5.1). Jeśli obraz się nie pojawia, sprawdź poprawność podanej nazwy, a jeśli plik nie znajduje się w tym samym katalogu co strona, poprawność ścieżki dostępu. 80

81 Wydruk 5.1. Wstawiamy obrazy <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <!-- to jest pierwszy akapit tekstu --> <p><b>lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i <b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>felidae</i>). Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>, <b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> <!--tu wstawimy obraz--> <img src="images/lampart.gif"> <!-- to jest drugi akapit tekstu --> <p><b>kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od <b>kota nubijskiego</b> (<i>felis silvestris lybica</i>) i od <b>azjatyckiego kota stepowego</b> (<i>felis silvestris ornata</i>). <br><br>do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> </body> </html> 81

82 Rys Obraz wstawiono między dwoma akapitami tekstu Jaki powinien być format wstawianych obrazów? Skąd wziąć obrazy? Poszukaj ich w swoich zasobach, w sieci (pamiętając o prawach autorskich!) lub zeskanuj coś obrazy powinny być w formacie GIF lub JPEG (innymi słowy rozszerzenie nazwy pliku powinno być.gif lub.jpg). Zapisz je w tym samym katalogu, w którym zapisany jest plik html zawierający Twoją stronę to uprości znacznie definiowanie atrybutu src lub w osobnym katalogu, podrzędnym względem katalogu przechowującego pliki Twojej strony WWW (patrz informacja zamieszczona powyżej). Co to jest GIF? Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format GIF (Graphics Interchange Format). Obrazy GIF są interpretowane niemal przez wszystkie typy przeglądarek (oczywiście zawsze są wyjątki). Obrazy GIF najbardziej nadają się do szkiców i prostych ilustracji (do fotografii stosuj format JPEG, o którym później). Format GIF pozwala również wybrać liczbę kolorów. Pamiętaj, że im więcej kolorów, tym większy plik. Pliki GIF można jednak poddawać kompresji. Inna zaleta formatu GIF to możliwość zdefiniowania obrazu jako przeźroczystego. Co to jest JPEG? Drugim na liście formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint Photographics Experts Group). Format JPEG to najlepszy wybór dla prezentacji fotografii. Stosowany do szkiców i prostych ilustracji spowoduje pojawienie się na obrazach rozmyć (naszą one nazwę artefaktów), z których na pewno nie byłbyś zadowolony, oraz zupełnie zbędny przyrost wielkości pliku. Za to fotografie zapisane w formacie JPEG wyglądają wspaniale. 82

83 Czy sam obraz wystarczy? Sam obraz, nawet najwspanialszy, to za mało. Musisz pomyśleć o tych, którzy wyłączyli opcję ładowania obrazów oraz tych, choć nielicznych, którzy nie korzystają z przeglądarek graficznych. Jeśli wstawiasz w swoim dokumencie obrazy, powinieneś zaopatrzyć je w tekst alternatywny. Informuje on użytkowników o treści obrazu, jeśli przeglądarka z jakichś względów go nie wyświetla. Strona pozbawiona grafiki straci niewątpliwie na atrakcyjności, ale znacznie ważniejsze jest to, że nie ucierpi przekaz informacji. Choć oglądający Twoją stronę nie będą obrazów widzieć, dowiedzą się przynajmniej co przedstawiają. Jak dodać tekst alternatywny? Dodanie tekstu alternatywnego umożliwia atrybut alt znacznika <img>. Atrybut ten działa w ten sposób, że wstawia na miejsce obrazu coś, co jest go w stanie zastąpić w tych przeglądarkach, które nie mogą go obsłużyć (patrz rysunek 5.2). Tekst ten jest przydatny także wówczas, gdy przeglądarka wyświetla obrazy nie zawsze bowiem są one oczywiste dla oglądającego (czy ktoś sam domyśli się, że zwierzak na obrazie to Twoja maskotka?). Rys Jeśli przeglądarka nie może wyświetlić obrazu, zastępuje go tekstem alternatywny m Aby zaopatrzyć obraz w tekst alternatywny, wyświetl kod źródłowy tworzonej strony w oknie edytora możesz skorzystać z przykładu zaprezentowanego na wydruku 5.1. Zdefiniuj tekst alternatywny opisujący obraz i dodaj do znacznika <img> atrybut alt. Przypisz mu jako wartość tekst alternatywny: <img src="images/lampart.gif" alt= To jest mój malutki kotek :) >. Zapisz plik i zobacz jak wygląda w przeglądarce (patrz rysunek 5.3). 83

84 Rys Obraz zaopatrzono w tekst alternatywny Tekst alternatywny pojawi się nad obrazem, gdy przesuniesz nad niego wskaźnik myszki. Jak wstawić obrazy w nagłówkach? Wróćmy do naszej strony testowej o zwierzakach i dodajmy nagłówki anonsujące omawianą tematykę. Duże zwierzaki prezentowane będą z pomocą nagłówka h1, a dla małych zarezerwujemy nagłówek h2. Aby prezentacja lepiej przemawiała do wyobraźni, oprócz samego tekstu, umieścimy w elementach h1 i h2 obrazy. Wyświetl kod źródłowy tworzonej strony w oknie edytora. Umieść znaczniki <img SRC="url"> w obrębie elementów h1 i h2. Na wydruku 5.2 odpowiednie fragmenty kodu zaznaczono czcionką pogrubioną. Zapisz plik i zobacz jak wygląda Twoja strona (patrz rysunek 5.4). Wydruk 5.2. Wstawiamy obrazy w obszarze nagłówka <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <!-- to jest nagłówek poziomu h1, w którym umieszczono obraz--> <h1 align="center"><img src="images/lampart.gif" alt="lampart" width="75" height="100">koty duże</h1> <!-- to jest pierwszy akapit tekstu i elementy formatowania--> <p><b>lwa</b>, <b>tygrysa</b>, <b>panterę</b>, <b>geparda</b> i <b>jaguara</b> nazywamy <big>wielkimi kotami</big>.<br><br> Należą do gromady ssaków, rzędu drapieżnych, 84

85 rodziny kotowatych (<i>felidae</i>). Do tej rodziny należą też małe koty: <b>puma</b>, <b>ryś</b>, <b>ocelot</b>, <b>serwal</b>. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> <! tu wstawimy linię poziomą--> <hr> <!-- to jest nagłówek poziomu h2, w którym umieszczono obraz--> <h2 align="center"><img src="images/kot.gif" alt="kotek" width="75" height="75"> Koty małe</h2> <!-- to jest drugi akapit tekstu i elementy formatowania--> <p><b>kot domowy</b> najprawdopodobniej pochodzi od dwóch gatunków: od <b>kota nubijskiego</b> (<i>felis silvestris lybica</i>) i od <b>azjatyckiego kota stepowego</b> (<i>felis silvestris ornata</i>). <br><br>do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> </body> </html> Rys Obrazy umieszczono w nagłówkach Czy można wstawić obraz w akapicie? Jeśli chcesz wstawić obraz w odrębnym akapicie, umieść znacznik <img> między znacznikami <p> </p>: <p><img src="images/lampart.gif" alt= To jest mój malutki kotek :) ></p>. 85

86 Obraz może się także pojawić w akapicie zawierającym tekst. Jest wówczas traktowany dokładnie tak samo jak sam tekst. Jeśli chcesz skorzystać z tej opcji, musisz zastanowić się nad kwestią wyrównania obrazu względem otaczającego tekstu. W jaki sposób zastosować do obrazu wyrównanie? Korektę umiejscowienia obrazu w obszarze tekstu umożliwia atrybut align. Sprawdźmy jego działanie na prostych przykładach. Na wydruku 5.3 znajdziesz akapity tekstu, w których wstawiono element img stosując do niego atrybut align z różnymi wartościami: bottom, middle i top. Kontrolują one pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu co obraz. Przeanalizuj ten kod i porównaj z zaprezentowanymi na rysunku 5.5 efektami działania. Przećwicz sam wyrównywanie obrazów w tekście wyświetl kod źródłowy tworzonej strony w oknie edytora, wstaw element img w tekście akapitu, dodaj do znacznika <img> atrybut align i przypisz mu różne wartości. Wydruk 5.3. Wyrównujemy obraz względem tekstu otaczającego <html> <head> <title>sposoby wyrównania obrazu względem tekstu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <head> <body> <p> Obraz <img src ="images/kot.gif" align="bottom" width="90" height="75"> w obrębie tekstu. </p> <p> Obraz <img src ="images/kot.gif" align="middle" width="90" height="75"> w obrębie tekstu. </p> <p> Obraz <img src ="images/kot.gif" align="top" width="90" height="75"> w obrębie tekstu </p> <p>oto domyślny sposób wyrównania - odpowiada on wartości bottom:</p> <p> Obraz <img src ="images/kot.gif" width="90" height="75"> w obrębie tekstu. </p> <p> <img src ="images/kot.gif" 86

87 width="90" height="75"> Obraz przed tekstem. </p> <p> Obraz za tekstem <img src ="images/kot.gif" width="90" height="75"> </p> </body> </html> Rys Oto różne sposoby wyrównyw ania obrazu względem otaczające go tekstu Jak zdefiniować wyrównanie obrazu względem marginesu? Sposób wyrównania obrazu względem marginesu także kontroluje się za pomocą atrybutu align. Jeśli nadasz mu wartość left, obraz zostanie wyrównany do lewego marginesu, jeśli right, przesunięty zostanie do prawego marginesu. Innymi słowy te dwie wartości umożliwiają określenie relacji między obrazem i tekstem. Jeśli obraz po lewej stronie, to tekst po prawej i odwrotnie. Tę relację określa się też mianem obłamywania tekstu. Możesz też wymusić umieszczenie tekstu pod obrazem skorzystaj w tym celu z atrybutu clear elementu br i przypisz mu wartość all. Szczegóły tej operacji poznasz analizując wydruk 5.4, a efekty zobaczysz na rysunku

88 Wydruk 5.4. Wyrównujemy obraz względem marginesów <html> <head> <title>sposoby wyrównania obrazu względem marginesu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <head> <body> <p> <img src="images/kot.gif" alt="kot" width="90" height="75" align="left">ten tekst pojawi się z prawej strony obrazu, który zostanie wyświetlony przy lewym marginesie. </p> <br> <br> <p> <img src="images/kot.gif" alt="kot" width="90" height="75" align="right">ten tekst pojawi się z lewej strony obrazu, który zostanie wyświetlony przy prawym marginesie. </p> <br> <br> <p> <img src="images/kot.gif" alt="kot" width="90" height="75" align="left"><br clear="all">aby wymusić umieszczenie tekstu pod obrazem, skorzystaj z atrybutu <i>clear</i> elementu br i przypisz mu wartość <i>all</i>, tak jak w tym przypadku. </p> </body> </html> Rys Oto różne sposoby wyrównyw ania obrazu względem marginesó w 88

89 Jak dostosować rozmiary obrazu? Jeśli uważnie analizowałeś kod z wydruków 5.3 i 5.4, zauważyłeś zapewne, że w znaczniku img znajdują się pewne dodatkowe atrybuty, o których nie było jeszcze mowy. To atrybuty width i height definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu. W tej przykładowej definicji znacznika <img>: <img src="images/kot.gif" alt="kot" width="90" height="75" align="right"> rozmiary obrazu zdefiniowano w pikselach. Na podstawie kodu z wydruku 5.5 i rysunku 5.7 możesz prześledzić, w jaki sposób ustawienia takie jak width i height wpływają na sposób prezentacji obrazu. Wydruk 5.5. Dostosowujemy rozmiar obrazu <html> <head> <title>dostosowywanie rozmiarów obrazu</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <head> <body> <p>tu szerokość i wysokość są równe 40:</p> <p> <img src="images/kot.gif" alt="kot" width="40" height="40"> </p> <p>tu szerokość i wysokość są równe 80:</p> <p> <img src="images/kot.gif" alt="kot" width="80" height="80"> </p> <p>tu szerokość i wysokość są równe 140:</p> <p> <img src="images/kot.gif" alt="kot" width="140" height="140"> </p> </body> </html> 89

90 Rys Atrybuty width i height pozwalają dostosowa ć rozmiar obrazu Jeśli musisz już zmieniać rozmiary obrazu, pamiętaj że lepiej jest zmniejszyć obraz niż powiększać. Powiększanie prowadzi do utraty jakości obrazu. Jak dodać wokół obrazu nieco wolnej przestrzeni? Jeśli umieszczasz obraz bezpośrednio w tekście, warto pomyśleć o dodaniu wokół obrazu nieco wolnej przestrzeni, aby tekst nie zlewał się z obrazem. Umożliwiają to dwa kolejne atrybuty znacznika <img>: vspace i hspace. Pierwszy definiuje szerokość wolnego obszaru nad i pod obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony. Choć możesz jednocześnie zdefiniować oba ustawienia, nie da się niestety wprowadzić wolnego obszaru tylko z jednej strony obrazu. Oto postać znacznika <img> z atrybutami vspace i hspace: <img src="images/widmo.gif" width="200" height="200" align="left" vspace="30" hspace="30"> Wolny obszar wokół obrazów także można zdefiniować korzystając z atrybutów Cell Padding i Cell Spacing (jeśli układ strony został oparty na tabeli) lub z kaskadowych arkuszy stylów. Jak ważne jest oddzielenie obrazu od tekstu jest pokazuje rysunek 5.8. Po odsunięciu tekstu od obrazu, strona prezentuje się znacznie lepiej. 90

91 Rys Atrybuty vspace i hspace pozwalają dodać wokół obrazu trochę wolnej przestrzeni u góry tekst zlewa się z obrazem; u dołu całość prezentuje się znacznie lepiej Jakie są najczęściej stosowane atrybuty znacznika <img>? Tabela 5.1 prezentuje niektóre z atrybutów, które można stosować ze znacznikiem <img>. Tabela 5.1 Niektóre atrybuty znacznika <img> Atrybut align= left align= right align= top align= middle align= baseline align= bottom Opis Obraz jest wyświetlany przy lewym marginesie, a tekst pojawia się obok, w obszarze między obrazem a prawym marginesem. Obraz jest wyświetlany przy prawym marginesie, a tekst pojawia się obok, w obszarze między obrazem a lewym marginesem. Kontrolują pionowe położenie obrazu względem tekstu, który znajduje się w tym samym wierszu 91

92 vspace= piksele hspace= piksele longdesc= url height= piksele wartość% widght= piksele wartość% Odległość obrazu od tekstu w pionie Odległość obrazu od tekstu w poziomie Pod wskazanym adresem URL umieszczono długi opis obrazu. Określa wysokość obrazu w pikselach lub w procentach rozmiaru oryginalnego. Określa szerokość obrazu w pikselach lub w procentach rozmiaru oryginalnego. Najważniejsze informacje Obrazy można wstawiać w odrębnym akapicie, wewnątrz tekstu czy nawet w obszarze nagłówka. Wstawianie obrazów umożliwia znacznik <img>. Znacznik ten jest pusty oznacza to, że nie posiada znacznika zamykającego, ale ma szereg atrybutów, które kontrolują sposób prezentacji obrazu na stronie (patrz tabela 5.1). Najważniejszym z atrybutów jest atrybut src. Umożliwia on określenie ulokowania obrazu i zdefiniowanie jego nazwy: <img src="url">. Przeglądarka wstawi obraz w miejscu, w którym umieszczony został element img. Najpopularniejszym formatem plików graficznych do zastosowań w Internecie jest format GIF (Graphics Interchange Format). Obrazy GIF są interpretowane niemal przez wszystkie typy przeglądarek. Drugim na liście formatów plików graficznych stosowanych w Internecie jest format JPEG (Joint Photographics Experts Group). Format JPEG to najlepszy wybór dla prezentacji fotografii. Umieszczając na stronie obrazy należy pamiętać o tekście alternatywnym. Informuje on użytkowników o treści obrazu, jeśli przeglądarka obrazu z jakichś względów nie wyświetla. Dodanie tekstu alternatywnego umożliwia atrybutu alt znacznika <img>. Wyrównywanie obrazów w tekście i względem marginesów strony umożliwia atrybut align znacznika <img>. Odpowiednie wartości atrybutu podano w tabeli 5.1. Rozmiary obrazu umieszczanego na stronie można dostosowywać. Służą do tego atrybuty width i height definiują one szerokość i wysokość obrazu. Wartości tych atrybutów podaje się pikselach lub w procentach wymiarów oryginalnych obrazu. Aby dodać wokół obrazu wolny obszar, należy skorzystać z atrybutów vspace i hspace znacznika <img>. Pierwszy definiuje szerokość wolnego obszaru nad i pod obrazem, a drugi wprowadza wolny obszar z prawej i lewej strony. 92

93 Rozdział 6. Połączenia Uniform Resource Locator Co to jest URL? Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW. Ogólna postać adresu WWW, na przykład: spełnia następujące reguły składni: protokół://host.domena:port/ścieżka/nazwa_pliku Co oznaczają poszczególne elementy adresu URL? Nazwa protokołu określa typ usługi internetowej w przypadku stron WWW jest to http. Inne nazwy to na przykład file, ftp, gopher, news, telnet. Domena to nazwa domeny internetowej, na przykład microsoft.com. Host to oczywiście host domeny. Domyślnym hostem dla http jest www. :port definiuje numer portu hosta zazwyczaj go pomijamy. Domyślny numer dla serwerów http to 80. Ścieżka określa ścieżkę dostępu na serwerze. Jeśli nie jest podana, dokument musi znajdować się w katalogu głównym witryny WWW. Nazwa pliku definiuje nazwę dokumentu. Nazwa domyślna to index.html lub default.asp, co zależy od ustawień serwera sieciowego. Ulokowanie dokumentu a ścieżka dostępu Zrozumienie relacji między adresem lokalnym dokumentu, w którym połączenie jest tworzone, a adresem dokumentu, do którego ono prowadzi, jest niezwykle istotne z punktu widzenia zrozumienia procesu definiowania połączeń. Jakie są rodzaje ścieżek dostępu? Każda strona WWW ma swój unikatowy adres URL (ang. Uniform Resource Locator). Jednak w przypadku połączeń lokalnych a więc z dokumentu do dokumentu tej samej witryny nie ma potrzeby wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem dokumentu bieżącego lub względem katalogu głównego witryny. Ścieżki dostępu mogą być więc następujące: bezwzględne (np. względne o zdefiniowane względem dokumentu (np.katalog/katalog.html) o zdefiniowane względem foldera głównego (np. /katalog/katalog.html) 93

94 Co to jest adres bezwzględny? Adres bezwzględny to po prostu pełny adres URL, wraz z nazwą protokołu. Jeśli więc odwołujesz się do dokumentu na innym serwerze, musisz podać pełny adres. Lokalnie nie ma potrzeby definiowania połączeń absolutnych jest to wręcz szkodliwe. Kiedy i jak korzystać z adresów względnych definiowanych względem dokumentu? Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych. Szczególnie wówczas, gdy dokumenty bieżący oraz te, których prowadzą połączenia znajdują się w jednym folderze. Nawet jeśli są w innym, wystarczy wskazać hierarchię folderów startując od bieżącego dokumentu. Tak więc, w przypadku odwoływania się do dokumentu w tym samym folderze wystarczy podać nazwę pliku. Jeśli odwołanie ma prowadzić do dokumentu w folderze podrzędnym, adres składa się z nazwy foldera podrzędnego i nazwy pliku rozdzielonych prawym ukośnikiem. Jak definiować adresy względne? Oto przykłady adresów względnych: Aby utworzyć połączenie prowadzące od pliku a1.html do pliku a2.html w tym samym folderze A, wystarczy podać nazwę pliku: a2.html (patrz rysunek 6.1). Rys Połączenie z pliku a.html do pliku b.html umieszczonego w folderze podrzędnym B Aby utworzyć połączenie z pliku a.html do pliku b.html (umieszczonego w folderze podrzędnym B), zdefiniuj adres względny: B/b.html (patrz rysunek 6.2). Rys Połączenie z pliku a.html do pliku b.html umieszczonego w folderze podrzędnym B Aby utworzyć połączenie od pliku b.html (folder podrzędny B) do pliku a.html (folder nadrzędny A), zdefiniuj adres jako../a.html (../ oznacza przejście o poziom wyżej w hierarchii folderów). 94

95 Rys Połączenie z pliku b.html do pliku a.html umieszczonego w folderze nadrzędnym A Aby utworzyć połączenie z pliku c.html (folder podrzędny C) do pliku b.html (w innym folderze podrzędnym, o nazwie B), zdefiniuj adres jako../b/b.html (../ spowoduje przejście do foldera nadrzędnego, a / przejście w dół hierarchii, do foldera podrzędnego B). Rys Połączenie z pliku c.html do pliku b.html oba w folderach podrzędnych względem A W przypadku przesuwania całej grupy plików, bez naruszania powiązań między nimi, połączenia względne nie wymagają aktualizacji. Przesunięcie pojedynczych plików taką konieczność spowoduje. Co to są adresy względne definiowane względem foldera nadrzędnego? W tym przypadku adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu. Adres rozpoczyna się od ukośnika, który oznacza folder witryny. Adres tego rodzaju: /A/a.html jest adresem pliku a.html z foldera A, który jest folderem podrzędnym foldera całej witryny. Korzystanie z tego typu adresów jest trudniejsze. Jeśli sprawia Ci ono kłopot, stosuj adresowanie względem dokumentu. Ten typ adresowania sprawdza się najlepiej, gdy pliki witryny są często przemieszczane. Jeśli połączenia zostały zdefiniowane względem foldera prezentacji, zachowają swoją poprawność. Połączenia definiowane względem foldera nadrzędnego są interpretowane przez serwery, a nie przeglądarki. 95

96 Definiowanie połączeń Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz. Jaki znacznik HTML umożliwia utworzenie połączenia? Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika zakotwiczenia i ma taką postać: <a href= url_dokumentu.html >Tekst połączenia</a> Znacznik ten oprócz atrybutu href może mieć także inne atrybuty. Co umożliwiają połączenia? Zanim zabierzemy się za definiowane połączeń, jeszcze kilka istotnych informacji na temat połączeń. Ich możliwości są ogromne: Połączenia mogą prowadzić do innych dokumentów, w tym również do obrazów, plików dźwiękowych, sekwencji wideo. Zakotwiczenia można definiować także w obrębie tej samej strony WWW (jeśli oznaczysz w dokumencie cele, będziesz mógł sterować sposobem odbioru strony). Dzięki połączeniom (które już poznałeś), ułatwisz użytkownikom nawiązanie kontaktu. Listy menu to nic innego jak listy połączeń stanowiące ciekawy element strony. Połączenia skryptowe pozwalają przypisać obiektom określone zachowanie. Powodują one wykonanie określonego kodu języka JavaScript. Jak wygląda połączenie? Wiesz to na pewno. Połączenia mają postać niebieskiego podkreślonego tekstu (w przypadku, gdy są tekstowe), którego kliknięcie wywołuje określoną akcję przejście do wskazanego miejsca. Strona WWW, do której prowadzi kliknięte połączenie zostanie wyświetlona w bieżącym oknie przeglądarki, chyba że ustawienia dodatkowe stanowią inaczej. Na rysunku 6.4 pokazany jest przykład strony, która z racji funkcji zbudowana jest w znacznej mierze z połączeń. 96

97 Rys Oto portal internetowy, w którym połączenia pełnią dominującą rolę Do tworzenia połączeń służy, jak się już dowiedziałeś, para znaczników <a> </a>. Element a nazywa się zakotwiczeniem. Podstawowym jego atrybutem jest href Hypertext REFerence. Jak definiować atrybut href? Wartością atrybutu href jest adres URL (Uniform Resource Locator). W najprostszej sytuacji, gdy obie łączone strony znajdują się w tym samym katalogu, stosuje się tylko nazwę pliku. Na przykład: Wyświetl <a href="dane.html">dodatkowe informacje</a> na ten temat. Znacznik <a> definiuje też styl powoduje podkreślenie tekstu i zmianę jego koloru na niebieski. Można go umieszczać w dowolnym elemencie HTML. Z oczywistych względów nie można zagnieżdżać znaczników <a> w sobie. Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów ). Aby utworzyć połączenie do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład: Lista <a href="1999/wszystkie.html">moich publikacji wydanych w 1999r</a>. Aby odwołać się do pliku w katalogu nadrzędnym, zastosujesz taką oto składnię: Powrót do <a href="../xxx.html">spisu treści</a>. W tym przypadku wykorzystywane są ścieżki względne. Ścieżki bezwzględne zawsze rozpoczynają się od ukośnika, co różni je od ścieżek względnych. Po ukośniku pojawiają 97

98 się nazwy wszystkich katalogów, od katalogu najwyższego poziomu po nazwę pliku, do którego tworzone jest łącze. Adresowanie względne jest wygodniejsze i bezpieczniejsze umożliwia swobodne przenoszenie stron między katalogami i systemami. Jeśli w adresie URL na końcu nie pojawia się nazwa pliku (a jedynie nazwa katalogu), serwer będzie szukał pliku o nazwie domyślnej najczęściej jest to plik index.html. Jeśli nie znajdzie takiego pliku, zwróci listę plików w katalogu. Do czego służy atrybut name? Innym ważnym atrybutem elementu a jest atrybut name. Stosowany jest on do zdefiniowania odnośnika: <a name="słowniczek">terminy i definicje</a> Wartością tego atrybutu jest słowo kluczowe. W przeciwieństwie do połączeń, odnośniki nie są widoczne na stronie. Żeby skierować połączenie na wybrany odnośnik, skorzystamy z elementu <a> o podobnej składni jak w przypadku zwykłych połączeń. Przed nazwą należy jednak dodać znak #: Patrz <a href="#słowniczek">dodatek A</a>. Zakotwiczenia o zdefiniowanych nazwach są często stosowane do utworzenia czegoś w rodzaju spisu treści strony WWW w poszczególnych sekcjach dokumentu umieszczane są zakotwiczenia o zdefiniowanych nazwach, a na początku strony pojawiają się połączenia do oznaczonych nazwami fragmentów. Co to jest połączenie ? Specjalne połączenie także je już poznałeś umożliwia czytelnikowi przesłanie listu do autora strony. Składnia jest tutaj następująca: <a href="mailto:me@myserver.com">wyślij do mnie list</a> Czy można wskazać miejsce otwieranego połączeniem dokumentu? Kliknięcie połączenia poprowadzi Cię do dokumentu, który jest dostępny pod adresem wskazanym przez atrybut href. Dokument ten wyświetlony zostanie w bieżącym oknie Twojej przeglądarki, zastępując wcześniejszą zawartość. Czy możemy to zmienić? Jak najbardziej. Służy do tego atrybut target. Atrybut ten może przyjmować jedną z czterech wartości: _blank, _parent, _self (jest to wartość domyślna) lub _top. Szczegółowy opis wpływu poszczególnych ustawień znajdziesz w dodatku A. Najczęściej wykorzystuje się wartość _blank, która pozwala otwierać nową stronę w nowym oknie. Jeśli chcesz otworzyć stronę w nowym oknie, postać kodu html jest następująca: <a href=" target="_blank">odwiedź tę stronę!</a> W dalszej części rozdziału poświęcimy atrybutom znacznika <a> więcej miejsca. Sprawdzimy różne sposoby jego wykorzystania w dokumentach html. 98

99 Definiowanie połączenia do innej strony Zaopatrzony we wstępne informacje na temat tworzenia połączeń możesz spróbować utworzyć połączenie prowadzące ze strony głównej do innego dokumentu html. Jak zdefiniować połączenie do innej strony tej samej witryny? Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni w niej rolę centrum dowodzenia nazywamy ją stroną główną, ale wielu użytkowników stosuje też określenie strona domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na stronach podrzędnych. Aby zdefiniować połączenie spinające dwie strony, musimy więc zacząć od przygotowania dwóch plików html. Wykorzystamy w naszych eksperymentach z połączeniami stronę o zwierzakach, z poprzedniego rozdziału. To będzie strona główna. Strona podrzędna będzie zawierała dodatkowe informacje na temat określony tekstem połączenia. Przyjrzyj się postaci strony WWW i zastanów się, w jakich miejscach chciałbyś umieścić połączenia (patrz rysunek 6.5). Rys Przekształci my w połączenia nazwy gatunków kotów będą prowadziły do stron poświęconyc h im konkretnie Wybierz fragmenty tekstu, które w najbardziej reprezentatywny sposób będą charakteryzowały punkt docelowy. W przykładzie przekształcimy w połączenia nazwy gatunków kotów, na razie wyróżnione czcionką pogrubioną połączenia te poprowadzą do stron poświęconych im tematycznie. Wyświetl w oknie edytora kod źródłowy swojej strony głównej kod tego przykładowego dokumentu znajdziesz w rozdziale 5., na wydruku 5.2. Zamień w nim wszystkie elementy b na elementy a, zgodnie ze składnią: <a href= nazwa_dokumentu.html >Tekst połączenia</a> Oczywiście jeśli w swoim pliku nie stosowałeś znaczników <b>, obejmij znacznikami <a> </a> żądany tekst. 99

100 Wartościami atrybutu href będą nazwy poszczególnych plików html, do których wiodą połączenia (tak będzie, jeśli wszystkie podrzędne pliki html umieścisz w tym samym folderze, w którym znajduje się plik strony głównej patrz rozważania na temat adresowania, na początku rozdziału). Przygotuj pliki html w taki sam sposób jak plik strony głównej i zapisz. Zapisz kod strony głównej i sprawdź działanie połączeń wczytując stronę główną do przeglądarki i klikając je (patrz wydruk 6.1 oraz rysunki 6.6 i 6.7). Wydruk 6.1. Połączenia prowadzące ze strony głównej do stron podrzędnych <html> <head> <title>zwierzaki</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <!-- to jest nagłówek poziomu h1, w którym umieszczono obraz--> <h1 align="center"><img src="images/lampart.gif" alt="lampart" width="75" height="100">koty duże</h1> <!-- to jest pierwszy akapit tekstu i połączenia--> <p><a href="lew.html">lwa</a>, <a href="tygrys.html">tygrysa</a>, <a href="pantera.html">panterę</a>, <a href="gepard.html">geparda</a> i <a href="jaguar.html">jaguara</a> nazywamy <big>wielkimi kotami</big>. <br> <br> Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych (<i>felidae</i>). Do tej rodziny należą też małe koty: <a hrefpuma, <a href="rys.html">ryś</a>, <a href="ocelot.html">ocelot</a>, <a href="serwal.html">serwal</a>. W sumie rodzina kotowatych obejmuje 40 gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty potrafią ryczeć.</p> <! tu wstawimy linię poziomą--> <hr> <!-- to jest nagłówek poziomu h2, w którym umieszczono obraz--> <h2 align="center"><img src="images/kot.gif" alt="kotek" width="75" height="75"> Koty małe</h2> <!-- to jest drugi akapit tekstu i kolejne połączenia--> <p><a href="kot_domowy.html">kot domowy</a> najprawdopodobniej pochodzi od dwóch gatunków: od <a href="nubijski.html">kota nubijskiego</a> (<i>felis silvestris lybica</i>) i od <a href="azjatycki.html">azjatyckiego kota stepowego</a> (<i>felis silvestris ornata</i>). <br> 100

101 <br>do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało to miejsce w dolinie Nilu.</p> </body> </html> Rys Wszystkie nazwy zostały przekształco ne w połączenia do innych dokumentów html tej samej witryny Rys Kliknięcie połączenia powoduje wyświetlenie w oknie przeglądarki pliku kot_domowy.html 101

102 Jak zdefiniować połączenie do zewnętrznej strony? Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego samego elementu a. Cała tajemnica tkwi w adresie url, który musi być w tym przypadku pełny. Jeśli więc chcesz umieścić na swojej stronie połączenie prowadzące do innej interesującej strony, spoza Twojej witryny, musisz jako wartość atrybutu href podać adres bezwzględny witryny. Na wydruku znajdziesz proste porównanie kodu html definiującego połączenie lokalne z odpowiednim kodem dla połączenia zewnętrznego. Zwróć uwagę, że na ekranie nie ma różnicy (patrz rysunek 6.8). Wydruk 6.2. Połączenia lokalne i zewnętrzne <html> <head> <title>połączenia lokalne i zewnętrzne</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <p> <a href="kot_domowy.htm"> Ten fragment tekstu</a> to połączenie do innej strony tej samej witryny. </p> <p> <a href=" Ten fragment tekstu</a> to połączenie prowadzące do witryny Microsoft. </p> </body> </html> 102

103 Rys Połączenia lokalne nie różnią się wyglądem od zewnętrznyc h Czy można dowiedzieć się pod jaki adres URL prowadzą połączenia? Podglądając postać źródłową strony WWW dowiesz się jak zdefiniowano na niej połączenia. Jest jednak prostsza metoda. Wystarczy spojrzeć na pasek stanu, z lewej strony (patrz rysunek 6.9). Rys Na pasku stanu wyświetlany jest adres URL wskazywane go myszką połączenia Jak wrócić do strony głównej? Element a pozwala zdefiniować połączenie, które poprowadzi Cię do innego dokumentu html Twojej witryny. A jak z niego wrócić? Jeśli chcesz tworzyć poprawne technicznie strony WWW, nie możesz skazywać czytelnika Twoich stron na korzystanie z przycisków nawigacyjnych przeglądarki. Zaplanowanie odpowiedniego systemu nawigacji między stronami jest tym ważniejsze, że daje Ci on możliwość sterowania sposobem przeglądania stron, co zwiększa prawdopodobieństwo skutecznego przekazu informacji. Co to oznacza? Oznacza mianowicie, że na wszystkich stronach witryny powinieneś wstawić połączenia prowadzące do strony głównej, a w idealnym przypadku także do pozostałych stron. 103

104 Czy obraz może być połączeniem? Jak wiesz, nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do tego celu obrazy. Ikony nawigacyjne zamiast zwykłych połączeń na pewno uatrakcyjnią Twoje strony. Mogą one mieć na przykład postać przycisków lub niewielkich obrazków jest to kwestia Twojej inwencji. Odpowiednie ikony znajdziesz wśród rysunków dołączonych do pakietu Microsoft Office lub możesz je sam przygotować. Posłużmy się takim obrazkiem, aby utworzyć graficzne połączenie pozwalające powrócić do strony głównej. Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w przypadku tekstu: <a href= url ><img src= url_obrazu alt= tekst_alternatywny></a> Element a obejmuje tym razem znacznik <img> a nie tekst. Przygotuj lub wybierz plik.gif lub.jpg, który chcesz zastosować jako ikonę nawigacyjną. Otwórz plik. Oddziel treść strony od menu ikon nawigacyjnych linią poziomą (użyj w tym celu znacznika <hr>). Dodaj na początku lub na końcu strony połączenie do strony głównej. Oto odpowiedni kod (patrz wydruk 6.3): Wydruk 6.3. Ikona nawigacyjna <html> <head> <title>kot domowy</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <p>kot DOMOWY (Felis domestica) pochodzi od dzikich gatunków kotów (m.in. od żbika). Istnieje wiele ras i odmian barwnych kotów, a główne rasy to: kot syjamski krótkowłosy o długiej, proporcjonalnej głowie z dużymi, szeroko rozstawionymi uszami i skośnymi, niebieskimi oczami, oraz kot perski długowłosy o okrągłej, masywnej głowie z małymi, zaokrąglonymi na końcach uszami i dużymi, okrągłymi, zwykle pomarańczowymi oczami.</p> <p>długość ciała kota to cm, ogona cm, masa ciała ok. 3 5 kg (wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6 10 miesiącu życia. Ruja występuje u kotek 2 3 razy w roku, a ciąża trwa ok. 60 dni. Zazwyczaj rodzi się od 4 8 młodych. </p> <hr> <!--Tu wstawimy akapit, a w nim umieścimy obraz pełniący rolę połączenia --> <p> Oto obraz, który pełni rolę połączenia powrotnego: <a href="obraz1.html"> <img src="images/back.gif" width="65" height="65" alt= Połączenie do strony głównej > </a> </p> 104

105 </body> </html> W tym przypadku kod został dodany na końcu strony. Zwróć uwagę, że obok ikony umieszczono też tekst opisujący dokąd prowadzi obraz-połączenie. Taki tekst można także przekształcić w połączenie. W naszym przykładzie ma on jedynie aspekt informacyjny. Ponieważ skorzystaliśmy z obrazu, możemy też dołączyć dodatkowe informacje definiując za pomocą atrybutu alt tekst alternatywny (patrz rysunek 6.10). Rys Ikona dodana na końcu strony pozwala powrócić do strony głównej bez konieczności korzystania z przycisków nawigacyjnych przeglądarki Odnośniki Jak już wspominałam, odnośniki zakotwiczenia o zdefiniowanych nazwach tworzy się przy użyciu tego samego znacznika <a>, który poznaliśmy przy okazji połączeń. Zamiast atrybutu href stosowany jest tu atrybut name. Atrybut ten zawiera słowa kluczowe, które będą stanowiły nazwę odnośnika: <a name= nazwa >tekst</a> Żeby skierować połączenie na wybrany odnośnik, musimy utworzyć zwykłe połączenie, z tym że wartością atrybutu href jest w tym przypadku nazwa odnośnika poprzedzona znakiem #. <a href= #nazwa>inny tekst</a> Jakie może być zastosowanie odnośników? Zdarza się, że strona zawiera omówienie jakiegoś zagadnienia (jest na przykład instrukcją obsługi lub zawiera wybrane fragmenty literackie). W takich obszernych tekstowo stronach przydatna jest komunikacja wewnętrzna, która umożliwi czytelnikowi przechodzenie do wybranych tematów oraz powrót. 105

106 W przełożeniu na język praktyki chodzi tu o umieszczenie na początku dokumentu czegoś w rodzaju spisu treści strony, którego pozycje będą prowadziły do kolejnych fragmentów. Z tej samej opcji można skorzystać definiując połączenie prowadzące na początek strony. Jak zdefiniować odnośniki? Utworzymy prosty plik, w którym zbudujemy spis treści strony. Na początku dokumentu pojawią się połączenia prowadzące do umieszczonych gdzieś w tekście zakotwiczeń o zdefiniowanych nazwach. Po przeanalizowaniu wydruku 6.4, bez trudu złapiesz, o co w tego typu konstrukcji chodzi. Zapisz swój plik, wczytaj stronę do przeglądarki i sprawdź działanie odnośników (patrz rysunek 6.11). Wydruk 6.4. Definiujemy odnośniki <html> <head> <title>spis treści</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <p> <a href="#r1"> Do rozdziału 1. </a> </p> <p> <a href="#r2"> Do rozdziału 2. </a> </p> <p> <a href="#r3"> Do Rozdziału 3. </a> </p> <p> <a href="#r4"> Do rozdziału 4. </a> 106

107 </p> <p> <a href="#r5"> Do rozdziału 5. </a> </p> <p> <a href="#r6"> Do rozdziału 6. </a> </p> <p> <a href="#r7"> Do rozdziału 7. </a> </p> <p> <a name="r1"><h2>rozdział 1</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> <a name="r2"><h2>rozdział 2</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> <a name="r3"><h2>rozdział 3</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> <a name="r4"><h2>rozdział 4</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> <a name="r5"><h2>rozdział 5</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> <a name="r6"><h2>rozdział 6</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> 107

108 <a name="r7"><h2>rozdział 7</h2></a> <p>ten rozdział zawiera bla bla bla bla</p> </body> </html> Rys Strona, na której utworzony został spis treści kliknięcie pozycji spisu przeniesie Cię do odpowiedniego rozdziału Jak wykorzystać odnośniki do przechodzenia na początek strony? Oczywiście w tym przypadku obowiązuje ten sam mechanizm. Spróbujmy jednak troszeczkę utrudnić sobie życie i przygotujmy obraz-połączenie. Scenariusz jest następujący: gdzieś na początku strony, na przykład w elemencie h1 (w przykładowym pliku jest on pierwszym elementem zawartości) umieścimy zakotwiczenie o zdefiniowanej nazwie; na końcu strony wstawimy element a, w którym atrybut href ma wartość odpowiadającą nazwie zakotwiczenia ze znakiem #. I to wszystko. Wydruk 6.5 zawiera przekład tego, co powiedzieliśmy na język HTML. Odpowiednie fragmenty kodu zostały wyróżnione czcionką pogrubioną. Pamiętaj, aby umieścić obraz stanowiący połączenie na początek strony w odpowiednim folderze! Wydruk 6.5. Powrót na początek strony <html> <head> <title>kot domowy</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1><a name="poczatek">kot DOMOWY (Felis domestica)</a></h1> <p>pochodzi od dzikich gatunków kotów (m.in. od żbika). Istnieje wiele ras i odmian barwnych kotów, a główne rasy to: kot syjamski - krótkowłosy o długiej, proporcjonalnej głowie z dużymi, szeroko rozstawionymi uszami i skośnymi, niebieskimi oczami, oraz kot perski - długowłosy 108

109 o okrągłej, masywnej głowie z małymi, zaokrąglonymi na końcach uszami i dużymi, okrągłymi, zwykle pomarańczowymi oczami.</p> <p>długość ciała kota to cm, ogona cm, masa ciała ok. 3-5 kg (wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6-10 miesiącu życia. Ruja występuje u kotek 2-3 razy w roku, a ciąża trwa ok. 60 dni. Zazwyczaj rodzi się od 4-8 młodych. </p> <hr> <p> <img src="images/kot_2.jpg" width="250" height="200"> <hr> <!--Tu wstawimy akapit, a w nim umieścimy obraz-połączenie do strony głównej --> <p> Oto obraz, który jest połączeniem powrotnym: <a href="obraz1.html"> <img src="images/back.gif" width="65" height="65" alt="połączenie do strony głównej"> </a> </p> <!--Tu wstawimy akapit, a w nim umieścimy obraz-połączenie na początek strony --> <p> Oto obraz, który prowadzi na początek strony: <a href="#poczatek"> <img src="images/top.gif" width="65" height="65" alt="na początek strony"> </a> </p> </body> </html> Rysunek 6.12 prezentuje nasz nowy element nawigacji w obszarze strony. 109

110 Rys Strona, na której utworzony został spis treści kliknięcie pozycji spisu przeniesie Cię do odpowiedniego rozdziału Więcej o obrazach pełniących funkcję połączeń Ja wykorzystać ikony do prezentacji obrazów? Często na stronie umieszcza się ikonę obrazu obrazek o niewielkich rozmiarach, i konfiguruje ją jako połączenie prowadzące do zewnętrznego pliku zawierającego obraz. Zmniejsza to rozmiar strony, skraca czas jej ładowania i daje czytelnikowi swobodę w podejmowaniu decyzji odnośnie ściągania pliku. Jeśli chciałbyś skorzystać z tego sposobu, przygotuj miniaturę obrazu i zapisz rozmiar takiego pliku jest o jeden rząd wielkości mniejszy od pliku obrazu. Umieść ikonę na stronie i przekształć ją w połączenie prowadzące do pliku zawierającego obraz w pełnych wymiarach. Można tu wykorzystać w połączeniu atrybut target znacznika <a>, aby obraz oryginalny był wyświetlany w nowym oknie. Kod strony przedstawiony jest na wydruku 6.6, a efekt jego działania na rysunku Wydruk 6.6. Stosowanie pomniejszonych obrazów jako połączeń do większych odpowiedników <html> <head> <title>koty</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>kot w worku</h2> <a href="images/kot_2.jpg" target="_blank"> <img src="images/kotek.gif"></a> 110

111 </body> </html> Rys Ikona jest tu połączeniem prowadzącym do zewnętrznego pliku obrazu; dzięki użyciu atrybutu target z wartością _blank obraz jest wyświetlany w nowym oknie Jak dodać do ikon informacje o wielkości plików? Do ikon zapraszających użytkownika do ściągnięcia obrazu można dołączyć informację o wielkości pliku. Ta sama metoda może posłużyć do podłączania także innych plików, niekoniecznie graficznych. Wydruk 6.7. Informacja o plikach <html> <head> <title>koty</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>kot w worku</h2> <p><img SRC="images/kotek.gif"></p> <ul> <li>kot (<a href="images/kot_2.gif">plik GIF; 1.03 MB</a>) <li>kot (<a href="images/kot_2.jpg">plik JPEG; 342 KB</a>) </ul> </body> </html> 111

112 Rys Miniatura może zachęcać do wyświetlenia obrazu; informacja o rozmiarze pliku będzie cenna dla tych, którzy chcą obraz ściągnąć Co to są mapy odsyłaczy? Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. Kliknięcie zwykłego połączenia tekstowego czy też w postaci obrazu prowadzi pod konkretny adres URL z nim stowarzyszony. W przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy będzie zależny od obszaru obrazu, w którym nastąpiło kliknięcie. Mapy odsyłaczy działające po stronie klienta stanowią element specyfikacji HTML 3.2. Ze względu na swoją naturę działają tylko w przeglądarkach graficznych. W tekstowych, na przykład w przeglądarce Lynx, nie będzie ani obrazu, ani jego funkcji nawigacyjnych. Musisz więc utworzyć ekwiwalent tekstowy obrazu, dzięki któremu użytkownicy przeglądarek tekstowych nie stracą dostępu do strony. Mapy odsyłaczy mogą z powodzeniem być stosowane jako centra nawigacji na stronach głównych. Jak przygotować mapę odsyłaczy? Proces przygotowania mapy odsyłaczy działającej po stronie klienta składa się z następujących etapów: 1. Wybór obrazu obraz powinien zawierać odrębne wizualnie obszary, aby definicje połączeń mogły być jednoznaczne. 2. Przygotowanie definicji mapy: Naszkicuj obraz i podziel go ręcznie na obszary (obszar może być prostokątem, wielokątem lub okręgiem). Wyświetl obraz w oknie programu do obróbki grafiki (np. może być to program Paint Shop Pro) i zanotuj współrzędne wskaźnika myszki w punktach krańcowych obszarów. W przypadku prostokąta, będą to współrzędne lewego górnego wierzchołka i prawego dolnego; w przypadku okręgu współrzędne jego środka i długość promienia. Jeśli obszar jest wielokątem, zanotuj współrzędne wszystkich wierzchołków. Przygotuj adresy URL (lub odsyłacze działające w obrębie strony), z którymi stowarzyszysz poszczególne obszary. 112

113 3. Umieszczenie mapy odsyłaczy w dokumencie HTML służy do tego znacznik <map>. Jego składnia jest następująca: <map name="nazwa_mapy">współrzędne i adresy</map> Wartością atrybutu name jest nazwa definicji mapy. Nazwa ta będzie wykorzystywana później w celu stowarzyszenia obrazu z odpowiadającymi mu współrzędnymi i odwołaniami. Między znacznikami <map> </map> umieszczane są współrzędne każdego z obszarów mapy odsyłaczy oraz adresy miejsc docelowych, do których wiodą poszczególne połączenia. Pojawiają się one w obrębie kolejnego znacznika <area>. Jego postać może być następująca: <area shape="poly" coords="x1,y1,x2,y2,x3,y3,xn,yn" href="url">, <area shape ="rect" coords="x1,y1,x2,y2" href="url"> <area shape ="circle" coords="x,y,promień" href="url"> lub Atrybut shape określa kształt obszaru. Jego wartości to "poly" (wielokąt), "rect" (prostokąt) lub "circle" (okrąg). Jak wygląda w praktyce proces definiowania mapy odsyłaczy? Proces przygotowania obrazu jako mapy odsyłaczy jest naprawdę prosty. Spróbujmy prześledzić go na konkretnym przykładzie. Zacznijmy od wybrania obrazu zdefiniowaniu obszarów, które będą pełniły rolę łączy. Wybierz odpowiedni obraz i przygotuj jego szkic na kartce. Może to być na przykład prosta struktura Twojej witryny. Podziel obraz na reprezentatywne obszary (patrz rysunek 6.16.). Rys Orientacyjny podział rysunku na obszary Wyświetl obraz w programie umożliwiającym obróbkę grafiki (np. takim jak Paint Shop Pro). Umieszczaj wskaźnik myszki w tych punktach obrazu, które definiują współrzędne obszarów w tym przypadku obszary mogą mieć postać okręgów (patrz rysunek 6.15). Gdy przesuniesz kursor nad środek okręgu, w lewym dolnym rogu okna programu pojawiają się jego współrzędne x i y (patrz rysunek 6.16) zanotuj je. Trzeba jeszcze oszacować promień okręgu, a to można zrobić umieszczając kursor nad krawędzią okręgu uzyskamy w ten sposób wartość współrzędnej x1. Różnica x-x1 to promień. 113

114 Rys Rejestracja współrzędn ych obszarów mapy odsyłaczy w lewym dolnym rogu okna programu pojawiają się współrzędn e Czas na umieszczenie definicji mapy odsyłaczy w kodzie dokumentu. Mapa, którą tutaj preparujemy, świetnie nadaje się na centrum nawigacyjne (musisz ją jednak dopracować pod względem graficznym). Wstawimy ją wobec tego na pustej stronie, utworzonej w oparciu o szablon. Zaczniemy od nagłówka <h3> informującego użytkownika co powinien zrobić, aby uzyskać określone informacje, a za nim umieścimy obraz, który będzie pełnił rolę mapy odsyłaczy. Dołącz do znacznika <img> atrybut usemap i przypisz mu jako wartość nazwę mapy zdefiniowanej za pomocą znacznika <map name="nazwa_mapy"> w naszym przykładzie mapa nosi nazwę strony. Nazwa mapy musi być poprzedzona znakiem # (patrz wydruk 6.8). Wydruk 6.8. Mapa odsyłaczy <h3>kliknij interesujący Cię obszar tematyczny:</h3> <p align="center"> <img src="images/strony.gif" width="584" height="245" alt="mapa_witryny" usemap="#mapa_witryny" border="0"> <map name="mapa_witryny"> W kolejnych wierszach kodu pojawią się definicje obszarów mapy (patrz wydruk 6.9). Obszary jak pamiętasz są okręgami (a więc atrybut shape ma wartość circle ). Wartością atrybutów href będą połączenia do innych stron witryny wiążących się z danym fragmentem obrazu. Zamiast odwołań tego typu możesz tu umieścić odnośniki do sekcji danej strony. Wydruk 6.9. Mapa odsyłaczy c.d. <area shape="circle" coords="186,44,45" href="podstawy.html" alt="informacje podstawowe"> 114

115 <area shape="circle" coords="42,171,45" href="style.html" alt="style i nie tylko.."> <area shape="circle" coords="186,171,45" href="skrypty.html" alt="trochę skryptów"> <area shape="circle" coords="318,173,45" href="dhtml.html" alt="dynamiczny HTML"> Zapisz swój plik i przetestuj. Pełny kod html mapy odsyłaczy prezentuje wydruk Na rysunkach 6.17 i 6.18 możesz zobaczyć mapę w działaniu. Wydruk Pełny kod html mapy odsyłaczy <html> <head> <title>mapa odsyłaczy</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h3>kliknij interesujący Cię obszar tematyczny:</h3> <p align="center"> <img src="images/strony.gif" width="584" height="245" alt="mapa_witryny" usemap="#mapa_witryny" border="0"> <map name="mapa_witryny"> <area shape="circle" coords="186,44,45" href="podstawy.html" alt="informacje podstawowe"> <area shape="circle" coords="42,171,45" href="style.html" alt="style i nie tylko.."> <area shape="circle" coords="186,171,45" href="skrypty.html" alt="trochę skryptów"> <area shape="circle" coords="318,173,45" href="dhtml.html" alt="dynamiczny HTML"> </map> </p> </body> </html> 115

116 Rys Mapa odsyłaczy jest gotowa do pracy po umieszczeniu wskaźnika myszki nad obszarem aktywnym, forma wskaźnika zmienia się w typową dla połączeń Rys Po kliknięciu, w oknie wyświetlony został dokument, do którego prowadziło połączenie stowarzyszone z obszarem aktywnym Połączenia do archiwów FTP Czasami można spotkać w Internecie strony, na których autorzy oferują własne programy lub pliki mp3. Jeśli chciałbyś na swojej stronie umieścić połączenie do takiego archiwum, zrób to tak (patrz wydruk 6.11): Wydruk Połączenie prowadzące do archiwum FTP <html> 116

117 <head> <title>ftp</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h2>archiwum FTP</h2> <p>jeśli interesują Cię moje pliki, idź do <a href="ftp://sokol.gliwicki.necik.pl">mojego archiwum FTP!</a> </p> </body> </html> Rysunek 6.19 pokazuje efekt działania kodu. Rys To połączenie prowadzi do archiwum FTP Najważniejsze informacje Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW. Ogólna postać adresu WWW, na przykład: spełnia następujące reguły składni: protokół://host.domena:port/ścieżka/nazwa_pliku Połączenia lokalne a więc z dokumentu do dokumentu tej samej witryny nie wymagają wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem dokumentu bieżącego lub względem katalogu głównego witryny. Adres bezwzględny to pełny adres URL, wraz z nazwą protokołu. 117

118 Adresy względne mogą być zdefiniowane względem dokumentu (np.katalog/katalog.html) lub względem foldera głównego (np. /katalog/katalog.html). Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych. W przypadku gdy adresy względne są definiowane względem foldera nadrzędnego, adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu. Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz. Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika zakotwiczenia i ma taką postać: <a href= url_dokumentu.html >Tekst połączenia</a>. Wartością atrybutu href jest adres URL. Połączenie umożliwia czytelnikowi przesłanie listu do autora strony. Składnia jest tutaj następująca: <a href="mailto:me@myserver.com">tekst</a> Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni rolę centralną jest to tak zwana strona główna lub domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na stronach podrzędnych. Połączenia są definiowane przy pomocy elementu a. Składnia wyrażenia jest następująca: <a href= nazwa_dokumentu.html >Tekst połączenia</a>. Wartościami atrybutu href są nazwy poszczególnych plików html, do których wiodą połączenia. Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego samego elementu a, lecz adres url, musi być w tym przypadku bezwzględny. Nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do tego celu obrazy. Element a obejmuje w takim przypadku znacznik <img> a nie tekst. Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w przypadku tekstu: <a href= url ><img src= url_obrazu alt= tekst_alternatywny></a>. Odnośniki zakotwiczenia o zdefiniowanych nazwach tworzy się przy użyciu tego samego znacznika <a>, który służy do tworzenia połączeń. Zamiast atrybutu href stosowany jest tu atrybut name. Atrybut ten zawiera słowa kluczowe, które będą stanowiły nazwę odnośnika: <a name= nazwa >tekst</a>. Żeby skierować połączenie na wybrany odnośnik, należy utworzyć zwykłe połączenie, z tym że wartością atrybutu href jest w tym przypadku nazwa odnośnika poprzedzona znakiem #: <a href= #nazwa>inny tekst</a>. Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. W przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy będzie zależny od obszaru obrazu, w którym nastąpiło kliknięcie. 118

119 Rozdział 7. Tabele HTML Do czego służą tabele? Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek. Każda tabela ma swój podpis definiuje go element caption który pozwala na dołączenie krótkiego opisu zawartości tabeli. Dłuższe opisy można dołączać korzystając z atrybutu summary. Tabele języka HTML umożliwiają prezentację danych na stronach WWW oraz kontrolowanie umiejscawiania elementów strony tekstu, tekstu preformatowanego, obrazów, pól formularzy, czy też innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach tabeli. Unikaj jednak stosowania tabel jako szablonu układu dokumentu W3C, konsorcjum opracowujące standardy języka HTML, zaleca stosowanie arkuszy stylów. Jakie są elementy strukturalne tabeli? W tabeli można wyróżnić trzy sekcje: nagłówka, stopki i treści. Umożliwiają to elementy thead, tfoot i tbody. Nadają one tabeli strukturę, a w najnowszych typach przeglądarek stwarzają możliwość przewijania zawartości tabeli niezależnie od sekcji nagłówka i stopki. Opcja ta jest szczególnie wygodna w przypadku długich tabel, bo opisy kolumn są zawsze wyświetlane na ekranie. Na narzucenie tabeli określonej struktury pozwala też opcja grupowania kolumn. Dzięki specjalnym właściwościom elementów colgroup i col, HTML 4 pozwala też na stopniowe wyświetlanie zawartości tabeli, bez konieczności czekania na jej pełne załadowanie. Tabele mogą zawierać dane nagłówka służy do tego element th lub zwykłe dane w tym przypadku elementem podstawowym jest td. Komórki tabeli można rozpinać na wielu wierszach i kolumnach, a każdą komórkę można zaopatrzyć w etykietę, co ułatwia przekazywanie informacji użytkownikom z wadami wzroku i pozwala prezentować tabele w przeglądarkach o ograniczonych możliwościach graficznych, na przykład zainstalowanych w telefonach komórkowych. Jak się zabrać do konstruowania tabeli? Zanim napiszesz kod tabeli, pobaw się w konstruktora. Naszkicuj tabelę na papierze, zaznacz komórki rozpięte na n wierszach i/lub kolumnach. Otwórz szablon strony w oknie edytora. Wpisz kod tabeli, rozpoczynając od zewnętrznego znacznika <table> i dodając kolejne wiersze elementy tr a w wierszach komórki nagłówka elementy th oraz danych elementy td.. Nie zapomnij o znacznikach zamykających. Wydruk 7.1 prezentuje prosty schemat kodu tabeli skorzystaj z jego pomocy. Wydruk 7.1. Podstawowy kod tabeli <html> <head> <title>tabela</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> 119

120 <body> <table border="1"> <caption>tabela przykładowa</caption> <tr> <th>nagłówek, komórka 1</th> <th>nagłówek, komórka 2</th> </tr> <tr> <td>wiersz 1, komórka 1</td> <td>wiersz 1, komórka 2</td> </tr> <tr> <td>wiersz 2, komórka 1</td> <td>wiersz 2, komórka 2</td> </tr> </table> </table> </body> </html> Ten kod pomoże nam rozszyfrować zagadnienia związane z tworzeniem tabel. Zapisz go na dysku (na przykład pod nazwą tabela.html) i zobacz w przeglądarce jak wygląda przygotowana tabela (patrz rysunek 7.1). Rys Tabela ma podpis umieszczony nad nią, oraz wiersz nagłówka i dwie komórki danych. Atrybut border pozwolił na dodanie obramowania domyślnie go nie ma 120

121 Jakie są funkcje poszczególnych elementów tabeli? Element table to zasobnik przechowujący wszystkie elementy składowe tabeli. Atrybut border definiuje szerokość obramowania tabeli w pikselach. Jego wartość w tym przypadku to 1 oznacza to, że chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to brak obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji. Element tr tworzy wiersz a każdy wiersz podzielony jest na komórki. Komórki to elementy th i td zawierają one dane nagłówka i dane tabeli. Czy można zwiększyć nieco wolny obszar w obrębie komórek? Przykładowa tabela nie wygląda najlepiej, a jednym z powodów tego stanu rzeczy jest zlewanie się ze sobą zawartości i obramowania. Czy możemy temu zaradzić? Tak, bo mamy do dyspozycji atrybut elementu table o nazwie cellpadding. Jak kolosalne ma on znaczenie przekonasz się, gdy zastosujesz atrybut w kodzie naszej tabeli, tak jak tutaj: <table border="1" cellpadding="10"> Oczywiście wartość atrybutu cellpadding może być dowolna. Na rysunku 7.2 możesz sprawdzić, jak zmienił się wygląd tabeli. Rys Do elementu table dodano atrybut cellpaddig Czy można zwiększyć wolny obszar rozsuwając komórki? Jeśli takie rozwiązanie nie wystarczy, masz do dyspozycji inną możliwość rozsunięcie samych komórek. Umożliwia to atrybut cellspacing, także dodawany do elementu table. Oto przykład jego definicji: <table border="1" cellpadding="10" cellspacing="10"> Dodaj atrybut cellspacing o wartości 10 do kodu html tabeli i zobacz, co tym razem się stanie. Komórki rozsuną się i tabela uzyska lekki wygląd (patrz rysunek 7.3). 121

122 Rys Do elementu table dodano atrybut cellspacing Uzyskany efekt wizualny zależy w dużym stopniu od tła tabeli, co pokazuje rysunek 7.4. Dobierając atrybuty bgcolor= kod_koloru określa kolor tła, i bordercolor= kod_koloru określa kolor obramowania, można uzyskać ciekawe efekty. Na rysunku 7.4 w pierwszym przypadku atrybuty te dodano w elemencie table, w drugim zdefiniowano tło w elementach tr, ale można też zmieniać kolory pojedynczych komórek tabeli. 122

123 Rys Kolor tła i obramowań także wpływają na wizualny efekt oddzielenia komórek Na końcu tego rozdziału znajdzies z tabelę 7.1, w której wymienio ne zostały podstawo we atrybuty elementó w tabeli. Bardziej rozbudow any wykaz jest dostępny w dodatku A. ng? Jaka jest właściwi e różnica między atrybuta mi cellpadd ing i cellspaci Rysunek 7.5 wizualizuje relacje pomiędzy zawartością komórek, odstępami między zawartością a krawędziami (cellpadding) i między samymi komórkami (cellspacing). 123

124 Rys Cellspacing, cellpadding a zawartość komórek Jak zdefiniować szerokość tabeli? Szerokość tabeli można zdefiniować korzystając z atrybutu width. Jego wartość można podawać w dwojaki sposób: w pikselach lub jako wartość procentową odległości między marginesami lewym i prawym. Jeśli więc w kodzie html przykładowej tabeli zdefiniujemy element table w taki oto sposób: <table border="1" cellpadding="10" width="50%"> to spowoduje to, że tabela w oknie przeglądarki będzie miała szerokość równą połowie szerokości jej okna. Sprawdź to na rysunku 7.6. Co więcej, relacja ta zostanie zachowana nawet wówczas, gdy użytkownik zmieni rozmiary okna przeglądarki. Rys Szerokość tabeli została zdefiniowana za pomocą atrybutu width i stanowi 50% szerokości okna Jaki mamy wpływ na sposób wyrównania tekstu w komórkach? Domyślnie przeglądarki wycentrowują zawartość komórek nagłówka (definiowanego za pomocą elementu th). Dane komórek zwykłych (tych definiowanych za pomocą elementu td) są natomiast wyrównywane względem lewej krawędzi komórki. Zmianę ustawień domyślnych umożliwia atrybut align, który można dodawać do elementów td lub tr. Dostępne wartości to center, right i left. 124

125 Na wydruku 7.2 przedstawiony został uaktualniony kod naszej tabeli. Między innymi do wierszy danych dodano atrybut align= center. W jaki sposób to wpływa na sposób wyrównania zawartości komórek możesz zaobserwować na rysunku 7.7. Wydruk 7.2. Podstawowy kod tabeli rozbudowany o pewne atrybuty <html> <head> <title>tabela</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <table border="1" cellpadding="10" width="50%"> <caption>tabela przykładowa</caption> <tr> <th>nagłówek, komórka 1</th> <th>nagłówek, komórka 2</th> </tr> <tr align="center"> <td>wiersz 1, komórka 1</td> <td>wiersz 1, komórka 2</td> </tr> <tr align="center"> <td>wiersz 2, komórka 1</td> <td>wiersz 2, komórka 2</td> </tr> </table> </table> </body> </html> 125

126 Rys. 7.7*. Zawartość komórek danych została wycentrowana Czy można zmienić sposób wyrównania także w pionie? Sposób wyrównania zawartości komórek można modyfikować także w pionie. Służy do tego atrybut valign. Jest on stosowany z wartościami top, middle lub bottom i można go stosować w każdej komórce lub wierszu. Jak zdefiniować w tabeli pustą komórkę? Większość przeglądarek nie wyświetli komórek tabeli, w których nie umieszczono danych. Jeśli więc dodamy do kodu naszej przykładowej tabeli kolejne komórki danych, lecz będą wśród nich puste: <tr align="center"> <td>wiersz 1, komórka 1</td> <td>wiersz 1, komórka 2</td> <td>wiersz 1, komórka 3</td> </tr> <tr align="center"> <td>wiersz 2, komórka 1</td> <td>wiersz 2, komórka 2</td> <td></td> </tr> to przeglądarka wyświetli tabelę w niezbyt eleganckiej postaci (patrz rysunek 7.8). Zwróć uwagę, że komórka nie ma obramowań, nie widać jej wcale. 126

127 Rys Jeśli w tabeli jest pusta komórka, przeglądarka Aby temu zaradzić, należy umieszczać w pustych komórkach twarde spacje, o tak: <tr align="center"> <td>wiersz 1, komórka 1</td> <td>wiersz 1, komórka 2</td> <td>wiersz 1, komórka 3</td> </tr> <tr align="center"> <td>wiersz 2, komórka 1</td> <td>wiersz 2, komórka 2</td> <td> </td> </tr> Teraz przeglądarka nie ma wyjścia i musi wyświetlić pustą komórek danych wraz z obramowaniem (patrz rysunek 7.9). 127

128 Rys Twarde spacje zmuszają przeglądarkę do wyświetlenia pustych komórek Jak rozpiąć komórkę na kilku kolumnach? Komórki rozpięte na kilku wierszach lub kolumnach można zaobserwować najczęściej w nagłówkach. I tam są najbardziej przydatne. Aby zdefiniować taką komórkę, należy do znacznika <th> lub <td> dodać atrybuty rowspan i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub kolumnach komórka jest rozpięta. Komórki są rozpinane w dół i na prawo, a więc aby utworzyć komórkę rozpiętą na kilku kolumnach, należy dodać atrybut colspan do komórki wysuniętej najbardziej w lewo, a w przypadku rozpinania komórki na wierszach, atrybut rowspan powinien być dodany do komórki pierwszej od góry. Rozbudujmy więc nagłówek naszej przykładowej tabeli wykorzystując możliwość rozpinania komórek, tak by uzyskać coś takiego, jak na rysunku Rys Plan tabeli nowa postać nagłówka z komórką rozpiętą na trzech kolumnach Dodamy w nagłówku jeszcze jeden wiersz i w elemencie tr umieścimy atrybut colspan. Ponieważ chcemy rozpiąć komórkę na trzech kolumnach, atrybut ten musi mieć wartość 3. Kod nagłówka tabeli jest teraz taki, jak na rysunku 7.11: 128

129 Rys Nowa postać kodu html nagłówka z komórką rozpiętą na trzech kolumnach W naszej tabeli można jeszcze dodać parę atrybutów zmieniających kolor tła wierszy. Finalny kod html tabeli przedstawiony jest na wydruku 7.3. Wydruk 7.3. Tabela, w której wiersz nagłówka rozpięty jest na trzech kolumnach <html> <head> <title>tabela</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <table border="1" cellpadding="10"> <caption>tabela przykładowa</caption> <tr> <th colspan="3" bgcolor="lightgreen">bardzo ważny nagłówek!!!</th> </tr> <tr> <th bgcolor="lightblue">nagłówek, komórka 1</th> <th bgcolor="lightblue">nagłówek, komórka 2</th> <th bgcolor="lightblue">nagłówek, komórka 3</th> </tr> <tr align="center" bgcolor="lightgrey"> <td>wiersz 1, komórka 1</td> <td>wiersz 1, komórka 2</td> <td>wiersz 1, komórka 3</td> </tr> <tr align="center"> <td>wiersz 2, komórka 1</td> <td>wiersz 2, komórka 2</td> <td> </td> </tr> 129

130 </table> </table> </body> </html> Tabela, którą tworzy kod z wydruku 7.3 (patrz rysunek 7.12) odpowiada projektowi z rysunku 7.10 porównaj sam. Rys Tabela, w której wiersz nagłówka został rozpięty na trzech kolumnach Jak rozpiąć komórkę na kilku wierszach? Przeanalizujmy jeszcze jeden przykład. Uwzględnia on większość z tego, czego nauczyłeś się już o tabelach: są tu komórki nagłówka, zwykłe komórki danych, do których zastosowane zostanie wyrównanie oraz są oczywiście komórki rozpięte na wierszach i kolumnach. Przeanalizuj kod źródłowy tabeli z wydruku 7.4 bez trudu zorientujesz się, które fragmenty definiują komórki rozpięte i skąd to wynika. Zapisz kod i wyświetl tabelę w przeglądarce (patrz rysunek 7.13). Wydruk 7.4. Rozbudowana tabela <html> <head> <title>tabela rozbudowana</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <table cellpadding=6 border=1> <caption align=bottom><b>tabela opisująca schemat wydatków</b></caption> <tr> <th rowspan="2"></th> <th colspan="2">wydatki</th> 130

131 <th rowspan="2">liczba stałych<br>pracowników</th> <th rowspan="2">liczba<br>zleceń</th> </tr> <tr> <th>planowane</th> <th>rzeczywiste</th> </tr> <tr> <th>styczeń</th> <td align="right">5700</td> <td align="right">3800</td> <td align="center">88</td> <td align="right">59</td> </tr> <tr> <th>luty</th> <td align="right">10800</td> <td align="right">9600</td> <td align="center">45</td> <td align="right">67</td> </tr> <tr> <th>marzec</th> <td align="right">14900</td> <td align="right">23000</td> <td align="center">36</td> <td align="right">24</td> </tr> <tr> <th>kwiecień</th> <td align="right">22700</td> <td align="right">15000</td> <td align="center">34</td> 131

132 <td align="right">45</td> </tr> </table> </body> </html> Rys Nieco bardziej skomplikowana tabela przyda Ci się do najróżniejszych prezentacji Jak do tabeli zastosować style CSS? Z pewną nieśmiałością opisywałam możliwość zmiany tła tabeli, wiersza czy komórki przy użyciu atrybutu bgcolor. Przede wszystkim dlatego, że standard HTML 4.01 kładzie bardzo mocny nacisk na stosowania formatowania za pośrednictwem stylów CSS. Cóż nam zostaje? Spróbować zdefiniować arkusz stylów, który zajmie się wyglądem naszej tabeli. Na pocieszenie powiem, że niemal wszystkie przeglądarki obsługują poprawnie atrybut bgcolor, nie musisz więc z nim się całkowicie rozstawać Zdefiniujmy style, które zostaną zastosowane w tabeli. Wydruk 7.5 prezentuje pełny kod tabeli formatowanej przy pomocy kaskadowego arkusza stylówi. Arkusz CSS został zaznaczony czcionką pogrubioną. Wydruk 7.5. Kaskadowy arkusz stylów formatujący tabelę <html> <head> <title>tabela formatowana stylami CSS</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!-- table { margin-left: -4% font-family: sans-serif; background: white; 132

133 border-width: 2; border-color: white; } th { font-family: sans-serif; background: rgb(204, 204, 153) } td { font-family: sans-serif; background: rgb(255, 255, 153) } --> </style> </head> <body> <table cellpadding=6 border=1> <caption align=bottom><b>tabela opisująca schemat wydatków</b></caption> <tr> <th rowspan="2"></th> <th colspan="2">wydatki</th> <th rowspan="2">liczba stałych<br>pracowników</th> <th rowspan="2">liczba<br>zleceń</th> </tr> <tr> <th>planowane</th> <th>rzeczywiste</th> </tr> <tr> <th>styczeń</th> <td align="right">5700</td> <td align="right">3800</td> <td align="center">88</td> <td align="right">59</td> </tr> <tr> <th>luty</th> <td align="right">10800</td> <td align="right">9600</td> <td align="center">45</td> <td align="right">67</td> </tr> <tr> <th>marzec</th> <td align="right">14900</td> 133

134 <td align="right">23000</td> <td align="center">36</td> <td align="right">24</td> </tr> <tr> <th>kwiecień</th> <td align="right">22700</td> <td align="right">15000</td> <td align="center">34</td> <td align="right">45</td> </tr> </table> </body> </html> Efekt graficzny formatowania tabeli przy użyciu arkusza CSS prezentuje rysunek Rys Tabela sformatowana przy użyciu arkusza stylów CSS A może jednak tabela bez obramowań? Jak wspomniałam, o tym, czy obramowania będą wyświetlane, czy nie, decyduje atrybut border. Jeśli więc nie chcesz widzieć obramowań, wystarczy, że w znaczniku <table> zdefiniujesz border= 0 i cellspacing= 0, o tak: <table cellpadding=6 border="0" cellspacing="0"> Przypisanie wartości 0 atrybutowi cellspacing jest konieczne, aby zlikwidować odstępy między komórkami, które choć niewielkie, są jednak widoczne. W jakich przypadkach przydają się tabele bez obramowań? Do czego może być przydatna tabela bez obramowań? A choćby do definiowania układu strony. Lecz nie tylko. Czasami po prostu tak jest lepiej. Na rysunku 7.15 możesz popodziwiać naszą tabelę właśnie bez obramowań wcale nie wygląda gorzej. 134

135 Rys Tabela bez obramowań Czy w tabeli można umieścić inne elementy HTML? Już wspominałam, że komórka może zawierać dowolne dane tekstowe, liczbowe, łącza, zagnieżdżoną inną tabelą, a także obraz. Wydruk 7.6 prezentuje kod tabeli, w której komórkach zastały ulokowane inne elementy html: <p>, <table>, <img> i <ul>. To pierwszy krok do zdefiniowania układu strony w oparciu o tabelę. Wystarczy, że zrezygnujesz z obramować (patrz punkt wcześniejszy) i to wszystko. Na rysunku 7.16 pokazana została tabela z umieszczonymi w niej elementami. Wydruk 7.6. Tabela a inne znaczniki <html> <head> <title>tabela z mnóstwem innych rzeczy</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <table border="1"> <tr> <td> <p>tutaj pojawia się tekst.</p> <p>i jeszcze jeden akapit tekstu...</p> </td> <td>w tej komórce zagnieżdżono inną tabelę! <table border="1"> <tr> <td>aaaaaa</td> <td>bbbbbb</td> 135

136 </tr> <tr> <td>cccccc</td> <td>dddddd</td> </tr> </table> </td> </tr> <tr> <td>ta komórka zawiera listę. <ul> <li>pozycja pierwsza</li> <li>pozycja druga</li> <li>pozycja trzecia</li> </ul> </td> <td><img src="images/kot_2.gif" width="100" height="100"></td> </tr> </table> </body> </html> Rys Ta tabela zawiera tekst, listę, inną tabelę oraz obraz O czym trzeba pamiętać wstawiając w komórce tabeli obraz? Jeśli decydujesz się umieścić w komórce obraz, użyj takiej postaci kodu: <td><img src="url_obrazu"></td> 136

137 Jest to ważne umieszczenie znaczników <td> i <img> w osobnych wierszach może zaburzyć umiejscowienie obrazu. Jak zapobiec problemom z wyświetlaniem tabel w przeglądarkach? Tabele nie są równie dobrze obsługiwane we wszystkich typach przeglądarek. Może się więc zdarzyć, że zamiast wypieszczonej tabeli, na ekranie pojawi się kaszka. Można tego uniknąć, aczkolwiek wymaga to bardzo pieczołowitego dopracowania układu tabeli. Jeśli umieścisz w komórkach tabeli nagłówki i cytaty blokowe, w środowisku, w którym tabela nie jest obsługiwana, tekst pojawi się w sposób uporządkowany i czytelny. Można też skorzystać ze znaczników <p> lub <br> umieszczanych na końcu wybranych komórek, np.: <td>dane<br></td> Tam, gdzie tabele są obsługiwane, te dodatkowe znaczniki będą ignorowane, natomiast tam, gdzie są kłopoty z obsługą tabel, zadziałają złamania wiersza. Pamiętaj o znacznikach zamykających </tr>, </th> i </td>. Pomimo, że są one opcjonalne, ich brak może być przyczyną nieoprawnego wyświetlania tabeli w pewnych przeglądarkach. Elementy konstrukcyjne tabeli Tabela 5.1 prezentuje podstawowe znaczniki definiujące tabelę, ich funkcje oraz niektóre atrybuty, które mogą Ci się najbardziej przydać. Szerszy wybór znajdziesz w dodatku A. Tabela 5.1. Znaczniki tabeli i podstawowe atrybuty Znaczniki <table> </table> Funkcja znacznika i jego atrybuty Tworzy tabelę jest opakowaniem pozostałych elementów. Domyślnie tabele nie mają obramowań. Niektóre atrybuty: cellspacing= piksele wolny obszar między komórkami align= left right sposób wyrównania tabeli cellpadding= piksele wolny obszar między krawędziami komórki a zawartością bgcolor= kod_koloru zmienia tło tabeli; wartością jest nazwa koloru lub liczba szesnastkowa background= url width= wartość% piksele szerokość tabeli w procentach względem szerokości 137

138 strony lub w pikselach height= wartość% piksele wysokość tabeli w procentach względem wysokości strony lub w pikselach <tr> </tr> <td> </td> <th> </th> <caption> </caption> Wiersz tabeli. Niektóre atrybuty: align="left center right justyfy char wyrównanie tekstu bgcolor="rrggbb" (lub nazwa koloru) kolor tła bordercolor=="rrggbb" (lub nazwa koloru) kolor obramowania Komórka tabeli. Komórki umieszcza się między znacznikami wiersza tabeli. Niektóre atrybuty: rowspan="n_wierszy" rozpięcie komórki na n wierszach colspan="n_kolumn" rozpięcie komórki na n kolumnach width= wartość% piksele szerokość komórki w procentach względem szerokości tabeli lub w pikselach Komórka nagłówka. Od komórki danych różni się tym, że zastosowano w niej czcionkę pogrubioną i wycentrowanie. Niektóre atrybuty: rowspan="n_wierszy" rozpięcie komórki na n wierszach colspan="n_kolumn" rozpięcie komórki na n kolumnach width= wartość% piksele szerokość komórki w procentach względem szerokości tabeli lub w pikselach Podpis informuje o zawartości tabeli. Podpis jest opcjonalny i umieszcza się go w obrębie elementu <table>, przed definicjami wierszy. Atrybut: align="top bottom left right" <tfoot> </tfoot> <thead> </thead> Stopka utworzona podobnie jak nagłówek ze zgrupowanych wierszy. Nagłówek tworzą go zgrupowane wiersze. 138

139 <tbody> </tbody>. Obszar treści tabeli. Najważniejsze informacje Tabele HTML pozwalają na sterowanie układem danych, tekstu, obrazów, połączeń, formularzy i ich pól, a także innych tabel, przy pomocy wierszy i kolumn komórek. Tabele umożliwiają prezentację danych na stronach WWW oraz kontrolowanie umiejscawiania elementów strony tekstu, tekstu preformatowanego, obrazów, pól formularzy, czy też innych tabel, poprzez umieszczanie ich w kolumnach lub wierszach tabeli. Element table to zasobnik przechowujący wszystkie elementy składowe tabeli: tr, th i td. Element tr tworzy wiersz a każdy wiersz podzielony jest na komórki. Komórki to elementy th i td zawierają one dane nagłówka i dane tabeli. Atrybut border definiuje szerokość obramowania tabeli w pikselach. Jego wartość równa 1 oznacza to, że chcemy, aby obramowanie było wyświetlane. Wartość równa 0 to brak obramowania. Jest to wartość domyślna, nie wymaga więc specyfikacji. Atrybut cellpadding elementu table pozwala zwiększyć wolny obszar w obrębie komórek. Oto przykładowa definicja: <table border="1" cellpadding="10"> Zwiększenie odstępu między komórkami umożliwia atrybut cellspacing, także dodawany do elementu table. Oto przykład jego definicji: <table border="1" cellpadding="10" cellspacing="10"> Za pomocą atrybutów bgcolor= kod_koloru i bordercolor= kod_koloru można zdefiniować kolor tła i kolor obramowania. Atrybuty te można ~wstawiać w elemencie table oraz innych w elementach tr i td. Szerokość tabeli można zdefiniować korzystając z atrybutu width. Jego wartość można podawać w pikselach lub w procentach szerokości okna przeglądarki. Oto przykład: <table border="1" cellpadding="10" width="50%"> Zmianę sposobu wyrównania zawartości komórek umożliwia atrybut align, który można dodawać do elementów td lub tr. Dostępne wartości to center, right i left. 139

140 Sposób wyrównania zawartości komórek można modyfikować także w pionie. Służy do tego atrybut valign. Jest on stosowany z wartościami top, middle lub bottom i można go stosować w każdej komórce lub wierszu. Aby puste komórki tabeli zostały poprawnie wyświetlone, należy umieszczać w nich twarde spacje, o tak: <td> </td> Aby zdefiniować komórkę rozpiętą na kilku wierszach lub kolumnach, należy do znacznika <th> lub <td> dodać atrybuty rowspan i/lub colspan, i przypisać im jako wartości liczby całkowite określające na ilu wierszach i/lub kolumnach komórka jest rozpięta. Aby wyłączyć wyświetlanie obramowań, należy w znaczniku <table> zdefiniować border= 0 i cellspacing= 0, o tak: <table cellpadding=6 border="0" cellspacing="0"> W przypadku umieszczania w komórce tabeli obrazu, należy zastosować taką oto składnię: <td><img src="url_obrazu"></td> Jest to ważne umieszczenie znaczników <td> i <img> w osobnych wierszach może zaburzyć umiejscowienie obrazu. 140

141 Rozdział 8. Ramki i układy ramek Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument html. Każdy z takich dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie niezależne. Wadą takiego sposobu prezentacji jest jedynie utrudnienie procesu drukowania strony. Co to jest ramka? Ramka to zdefiniowana przez swojego twórcę część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. Tak więc ramka może być przewijana niezależnie od pozostałej zawartości okna. Można też swobodnie zmieniać jej rozmiary. Zawartość ramki tworzy standardowy plik HTML. Wszystkie cechy ramek określane są za pomocą atrybutów znacznika <frame>, generującego ramkę. Lista podstawowych atrybutów została zebrana w tabeli 8.1. Rozszerzony zestaw atrybutów znajdziesz w dodatku A. Co to jest układ ramek? Układ ramek to zestaw ramek wypełniający okno przeglądarki lub ramkę w zewnętrznym układzie ramek. Poszczególne ramki układu mogą mieć swoje nazwy dzięki temu można tworzyć połączenia do ramek oraz stosować nazwy ramek w skryptach. O ile strona WWW w klasycznej formie nie odbiega od tego, co zwykliśmy sobie wyobrażać pod pojęciem strona, to prezentacja informacji w układzie ramek jest już czymś typowym dla aplikacji komputerowych. Zazwyczaj w układzie ramek jedna z ramek prezentuje informacje, a druga, często statyczna, jest wyposażona w system nawigacji i stanowi coś w rodzaju systemu dowodzenia tu decydujesz, co będzie wyświetlane w pierwszej ramce. Wybranie połączenia w pierwszej ramce powoduje uaktualnienie zawartości drugiej ramki. Strony WWW z ramkami są niewątpliwie bardziej atrakcyjne wizualnie, lecz znacznie trudniejsze w projektowaniu i przygotowaniu. Do czego służy znacznik <frameset>? Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset. W elemencie tym określane są następujące cechy układu ramek: Sposób podziału okna na ramki. Liczba wierszy lub kolumn. Obszar ekranu przyporządkowany poszczególnym kolumnom/wierszom. Do czego służy znacznik <frame>? Znacznik <frame> definiuje dokument, który zostanie umieszczony w danej ramce. Wartością jego atrybutu src jest adres url dokumentu html. 141

142 Jaka jest ogólna postać definicji układu ramek? Ogólna postać definicji układu ramek przedstawiona została na wydruku 8.1. Przy tworzeniu ramek należy pamiętać, że znaczniki <body> i <frameset> wzajemnie się wykluczają. Co więcej, znacznik <frameset> nie może zawierać innych znaczników formatujących, połączeń oraz dokumentów tekstowych. Wydruk 8.1. Definicja układu ramek <html> <head> <title>tytuł strony</title> </head> <frameset atrybut= wartość > <frame src= url >... <frame src= url > </frameset> </html> Aby zdefiniować układ ramek, konieczne jest: Rys Określenie liczby ramek w układzie. Przygotowanie plików, które wypełnią poszczególne ramki. Jeśli na przykład w układzie będą trzy ramki, konieczne będą trzy pliki HTML (patrz rysunek 8.1). Plik definiujący układ ramek bazuje na plikach definiujących zawartość poszczególnych ramek W jaki sposób można podzielić okno przeglądarki na pionowe ramki? Znacznik <frameset> przyjmuje dwa atrybuty: cols i rows. Pierwszy z nich, cols, umożliwia określenie liczby kolumn, na które zostanie podzielone okno przeglądarki a więc liczby 142

143 ramek pionowych. Co więcej, atrybut ten pozwala także wskazać sposób przypisania kolumnom obszaru okna. Zobaczmy jak wykorzystać ten atrybut. Oto podstawowa definicja znacznika <frameset> z atrybutem cols: <frameset cols="szerokość_kolumny, szerokość_kolumny,..."> Liczba kolumn określana jest liczbą wartości atrybutu cols. Wartości te podawane są kolejno, z przecinkami. Wartości czyli szerokość ramki można definiować w pikselach, w procentach (względem całkowitej szerokości układu ramek) oraz za pomocą znaku * (w tym przypadku przydzielana jest ramce maksymalna możliwa szerokość). Jak podzielić okno na ramki o jednakowej szerokości? Aby podzielić okno na ramki, o jednakowej szerokości, przypisz atrybutowi cols wartości określone za pomocą symbolu *. Jeśli więc układ ramek ma składać się z trzech identycznych ramek, definicja elementu frameset będzie następująca: <frameset cols="*, *, *"> Unikaj definiowania rozmiarów ramek w jednostkach bezwzględnych. Jeśli jednak musisz, to wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona. Jak w praktyce poradzić sobie z kodem html układu ramek? Wydruk 8.2 pokazuje przykładowy podział okna przeglądarki na trzy pionowe ramki. Wydruk 8.2. Układ trzech ramek pionowych <html> <head> <title>układ trzech ramek pionowych</title> </head> <frameset cols="25%,50%,25%"> <frame src="ramka1.html <frame src="ramka2.html <frame src="ramka3.html </frameset> </html> Ramki te możesz zobaczyć na rysunku 8.2. Ramka środkowa zajmuje 50% szerokości układu ramek, a ramki skrajne po 25%. 143

144 Rys Układ trzech ramek pionowych W każdej z ramek wyświetlany jest inny dokument html. Ich nazwy stanowią wartości atrybutu src poszczególnych znaczników <frame>. Na razie pliki ramka1.html, ramka 2.html i ramka3.html nie zawierają nic, oprócz podstawowego kodu HTML są to po prostu klony szablonu dokumentu HTML. Jak wykorzystać taki pionowy układ ramek w praktyce? Pionowy układ ramek może nam się przydać do stworzenia dokumentu html, w którym jedna ramka będzie ramką nawigacyjną, a druga będzie prezentować wybrane w pierwszej tematy. Ramkę nawigacyjną umieścimy po lewej stronie to jest bardziej naturalny układ, częściej spotykany a jej zawartość będzie statyczna. Stanowić ją będzie zestaw połączeń, aczkolwiek można go zastąpić mapą odsyłaczy. W ramka z prawej pojawią się dokumenty wskazane w ramce nawigacyjnej. Skoro tak, to należałoby prawej ramce przyznać dominujący obszar okna. Niech więc szerokości ramek stanowią odpowiednio 25 i 75% szerokości układu ramek. Aby umożliwić komunikację między ramkami za pomocą połączeń, musimy zidentyfikować ramki, nadając im nazwy, oraz wskazać cel połączeń ramkę o określonej nazwie. Pierwsze zadanie wykonamy korzystając z atrybutu name znacznika <frame>. Do realizacji drugiego przyda się atrybut target znacznika <a>. Zdefiniujmy więc odpowiednie pliki: uklad_ramek.html jest układ dwóch pionowych ramek. nawigacja.html ten plik zawierać będzie listę, której elementami będą połączenia. strona.html to plik html drugiej ramki. Zostanie on załadowany do drugiej ramki po wczytaniu układu ramek do okna przeglądarki. pliki pozostałych dokumentów html ich liczba będzie zależała od tego, ile połączeń zdefiniujesz w ramce nawigacyjnej, Wydruki 8.3, 8.4 i 8.5 stanowią przykłady takich plików. Wydruki zaopatrzone zostały w komentarze html, które pomogą Ci prześledzić sposób działania kodu. 144

145 Wydruk 8.3. uklad_ramek.html <html> <head> <title>ramki w pionie</title> </head> <frameset cols="25%,75%"> <!-- Atrybut name definiuje nazwy ramek --> <frame src="nawigacja.html" name="nawigacja"> <frame src="strona.html" name="strona"> </frameset> </html> Układ ramek z wydruku 8.3 to układ dwóch ramek. Za pomocą atrybutu name przypisano pierwszej z ramek nazwę nawigacja, a drugiej strona. Wydruk 8.4. Nawigacja.html <html> <head> <title>nawigacja</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h3>wybierz interesujący cię temat: </h3> <!-- lista połączeń --> <ul> <!-- Zwróć uwagę na atrybut target jego wartością jest nazwa ramki --> <li><a href="strona.html" target="strona">strona 1</a> <li><a href="strona1.html" target="strona">strona 2</a> <li><a href="strona2.html" target="strona">strona 3</a> </ul> </body> </html> W tym pliku html został wykorzystany element ul tworzący listę wypunktowaną. Elementami listy są połączenia prowadzące do kolejnych plików html: 145

146 <li><a href="strona1.html" target="strona">strona 2</a> Połączenia są definiowane za pomocą znacznika <a>, który przyjmuje dwa atrybuty: href i target. Wartością atrybutu src są adresy url plików wyświetlanych w szerszej z ramek Ramka ta jest wskazywana jako cel połączeń za pomocą atrybutu target jego wartością jest nazwa szerszej ramki. Atrybut target ma kluczowe znaczenie w definiowaniu systemu nawigacji między ramkami. Ramkom warto nadawać nazwy, nawet jeśli w danej chwili nie korzystasz z nich. Jeśli będziesz rozwijał swoją stronę WWW, może się to okazać bardzo przydatne. Istnieją jednak nazwy, do których należy podchodzić z niezwykłą ostrożnością nazwy te rozpoczynają się od znaku podkreślenia i mają specjalne funkcje. Te wyjątkowe nazwy prezentuje tabela 8.2. Wydruk 8.5. strona.html <html> <head> <title>strona</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <!-- Wstaw tu dowolną zawartość --> <h2>to jest plik o nazwie strona.html.</h2> <p>jeśli chcesz wyświetlić inny plik, kliknij połączenie...</p> </body> </html> Plik html z wydruku 8.5 to dowolny plik html. Może to być strona główna Twojej witryny. W takim przypadku połączenia będą prowadziły do kolejnych stron witryny. Na rysunku 8.3 możesz zobaczyć układ ramek, który właśnie skonstruowaliśmy. Klikając połączenia w ramce nawigacyjnej, będziesz wyświetlał w ramce z prawej strony kolejne dokumenty html składające się na Twoją witrynę. 146

147 Rys Ramki dzielą okno w pionie Taki układ ramek można także wykorzystać do prezentacji zewnętrznych stron WWW. Wymaga to jedynie odpowiedniego zdefiniowania adresów url przy wykorzystaniu adresowania bezwzględnego (patrz rozdział Połączenia) (patrz rysunek 8.4). Rys Teraz połączenia prowadzą do innych witryn Kiedy pojawiają się w ramkach paski przewijania, a kiedy nie? Domyślnie ramki są automatycznie zaopatrywane w paski przewijania wtedy, gdy jest to konieczne. Jeśli chciałbyś zablokować przewijanie zawartości ramki, umieść w znaczniku <frame> atrybut scrolling i przypisz mu wartość no. Czy użytkownik może zmieniać rozmiary ramek? Ramki są oddzielane obramowaniem, z którego możesz skorzystać, aby zmienić zadane rozmiary ramki. Złap za obramowanie oddzielające ramki i przeciągnij w odpowiadające Ci położenie. 147

148 Jak wyłączyć wyświetlanie obramowania? Aby pozbyć się obramowań, skorzystaj z takiej definicji znacznika: <frameset rows="75,*" border= 0 frameborder= 0 framespacing= 0 > Wyłączenie wyświetlania obramowań ramek znacznie utrudni użytkownikowi zmianę rozmiarów ramek. Nie jest on jednak w sytuacji beznadziejnej nad obramowaniem, którego wyświetlanie wyłączono, wskaźnik myszki zmienia postać (patrz rysunek 8.5). Rys Obramowania ramek zostały ukryte. Zwróć jednak uwagę na postać wskaźnika myszki informuje ona, że tam jest obramowanie Jak podzielić okno przeglądarki w poziomie? Drugim atrybutem znacznika <frameset> jest rows. Umożliwia on określenie liczby wierszy, na które zostanie podzielone okno przeglądarki a więc liczby ramek poziomych. Oto postać definicji: <frameset rows="wysokość_wiersza, wysokość_wiersza,..."> Unikaj stosowania absolutnych rozmiarów ramek. Jeśli jednak musisz, to wymiary pozostałych ramek określaj za pomocą gwiazdki, *, aby pozostała część ekranu została wypełniona. Aby podzielić okno na trzy poziome ramki, o jednakowej wysokości, zastosuj atrybut rows="*, *, *". Jak napisać kod html poziomego układu ramek? Przygotujemy prosty układ dwóch ramek, dzielących ekran w poziomie. W pierwszej, węższej, możemy umieścić banner, a w drugiej, szerszej, dokument html. Wąskiej rameczce narzucimy stałą wysokość, na przykład 75 pikseli. Druga ramka niech wypełni pozostałą część ekranu. Wydruk 8.6 pomoże Ci w zaprojektowaniu układu ramek. Wydruki 8.7 i 8.8 to pliki HTML z zawartością ramek banner.html i strona.html. Możesz je dowolnie modyfikować. Na razie nie ma w nich nic szczególnego. Wydruk 8.6. Prosty układ ramek <html> <head> 148

149 <title>ramki poziome</title> </head> <frameset rows="75,*"> <frame src="baner.html"> <frame src="strona.html"> </frameset> </html> Ten układ ramek różni się od układu zdefiniowanego na wydruku 8.3 tylko tym, że element frameset ma tu atrybut rows. Jego wartości wskazują, że okno podzielone zostanie na dwie ramki, przy czym jednej narzucona została wysokość 75 pikseli, a wysokość drugiej to pozostała część okna. W wąskiej ramce pojawi się baner reklamowy, a w wysokiej Twoja strona WWW. Wydruk 8.7. Banner.html <html> <head> <title>banner</title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <marquee><h1>oto najwspanialsza strona WWW na świecie!!!<h1></marquee> </body> </html> Plik baner.html to prostu dokument html, który zawiera napis reklamowy. Napis ten będzie płynnie przewijany w poprzek ekranu. Wykorzystana tu została prosta metoda tworzenia animacji tekstowych, tak zwanych animacji Marquee. Aby utworzyć taką animację, wpisz między znacznikami <marquee> </marquee> dowolny tekst. Znacznik ten ma swoje atrybuty zostały one zebrane w tabeli 8.3. Jest to bardzo prosta metoda, lecz należy pamiętać, że udostępnia ją tylko Internet Explorer. W Netscape napis będzie nieruchomy. Wydruk 8.8. Strona.html <html> <head> <title>strona </title> <meta http-equiv="content-type" content="text/html; charset=iso "> </head> <body> <h1>to jest ramka, w której wyświetlana będzie strona</h1> 149

150 </body> </html> Plik strona.html tozwykły dokument html. Zastąp go swoją stroną WWW. Na rysunku 8.6 pokazane zostały efekty naszej pracy okno przeglądarki zostało podzielone na dwie poziome ramki. Rys Okno przeglądarki podzielone zostało na dwie ramki poziome Czy można mieszać ramki poziome i pionowe? Łączenie poziomych i pionowych układów ramek pozwala budować skomplikowane układy, przypominające szachownicę. Aby utworzyć mieszany układ ramek, konieczne jest zagnieżdżenie elementu frameset w innym elemencie frameset. Utwórzmy taki układ ramek, który umożliwia jednoczesną prezentację trzech dokumentów (patrz rysunek 8.7). Rys Okno przeglądarki podzielone zostało na dwie ramki poziome Kod html takiego dokumentu znajdziesz na wydruku 8.9. Wydruk 8.9. Mieszany układ ramek <html> <head> 150

151 <title>mieszany układ ramek</title> </head> <frameset rows="50%,50%"> <frame src="ramka_a.html"> <frameset cols="25%,75%"> <frame src="ramka_b.html"> <frame src="ramka_c.html"> </frameset> </frameset> </html> Konieczne jest oczywiście przygotowanie plików ramka_a.html zawartość górnej ramki, ramka_b.html zawartość dolnej lewej ramki, i ramka_c.html zawartość dolnej prawej ramki. Jak wygląda taki podział okna możesz zobaczyć na rysunku 8.8. Rys Mieszany układ ramek Jak zabezpieczyć się przed nieprawidłową obsługą ramek? Nie wszyscy mogą i chcą korzystać z ramek. Dla nich właśnie dołącz do swojej strony połączenie umożliwiające wyświetlenie strony w środowisku bez ramek. Umożliwia to element noframes. Umieszcza się go w obrębie elementu frameset: <html> <head> <title>tytuł strony</title> <frameset cols = "25%, 25%,*"> <noframes>przeglądarka nie obsługuje ramek!</noframes> <frame src ="ramka_a.html"> 151

Rozdział 1. Informacje podstawowe

Rozdział 1. Informacje podstawowe Rozdział 1. Informacje podstawowe Książka poświęcona jest podstawom języka HTML HyperText Mark-up Language. Utworzą one solidny fundament, który pozwoli Ci budować nawet skomplikowane strony WWW. Jeśli

Bardziej szczegółowo

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony: Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod

Bardziej szczegółowo

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5 PODSTAWOWE INFORMACJE HTML (HyperText Mark-up Language) język programowanie, który pozwala na publikowanie treści w sieci WWW. Nie jest to klasyczny język liniowy (w HTML mamy dostęp w każdym miejscu do

Bardziej szczegółowo

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Przedmiot: Grafika komputerowa i projektowanie stron WWW KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup

Bardziej szczegółowo

ABC HTML IDZ DO KATALOG KSI EK TWÓJ KOSZYK CENNIK I INFORMACJE CZYTELNIA PRZYK ADOWY ROZDZIA SPIS TREŒCI KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG

ABC HTML IDZ DO KATALOG KSI EK TWÓJ KOSZYK CENNIK I INFORMACJE CZYTELNIA PRZYK ADOWY ROZDZIA SPIS TREŒCI KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG IDZ DO PRZYK ADOWY ROZDZIA SPIS TREŒCI KATALOG KSI EK KATALOG ONLINE ABC HTML Autor: Maria Sokó³ ISBN: 83-7197-835-9 Format: B5, stron: 192 ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK DODAJ DO KOSZYKA CENNIK I

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

Zadanie 1. Stosowanie stylów

Zadanie 1. Stosowanie stylów Zadanie 1. Stosowanie stylów Styl to zestaw elementów formatowania określających wygląd: tekstu atrybuty czcionki (tzw. styl znaku), akapitów np. wyrównanie tekstu, odstępy między wierszami, wcięcia, a

Bardziej szczegółowo

Pierwsza strona internetowa

Pierwsza strona internetowa HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania

Bardziej szczegółowo

Pokaz slajdów na stronie internetowej

Pokaz slajdów na stronie internetowej Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów

Bardziej szczegółowo

World Wide Web? rkijanka

World Wide Web? rkijanka World Wide Web? rkijanka World Wide Web? globalny, interaktywny, dynamiczny, wieloplatformowy, rozproszony, graficzny, hipertekstowy - system informacyjny, działający na bazie Internetu. 1.Sieć WWW jest

Bardziej szczegółowo

Ćwiczenie 2 Tekst podstawowe znaczniki.

Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 Tekst podstawowe znaczniki. Ćwiczenie 2 poświęcone jest formatowaniu tekstu za pomocą znaczników. AŜeby uzyskać poŝądany wygląd tekstu musimy posłuŝyć się określonymi znacznikami. Ćwiczenie

Bardziej szczegółowo

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word)

Ćwiczenia nr 2. Edycja tekstu (Microsoft Word) Dostosowywanie paska zadań Ćwiczenia nr 2 Edycja tekstu (Microsoft Word) Domyślnie program Word proponuje paski narzędzi Standardowy oraz Formatowanie z zestawem opcji widocznym poniżej: Można jednak zmodyfikować

Bardziej szczegółowo

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania

Bardziej szczegółowo

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML Zad.1 Zapoznaj się z poniŝszymi artykułami dotyczącymi projektowania stron WWW:. http://galeria.muzykaduszy.pl/zasady.php

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej.

Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej. Wymagania edukacyjne z informatyki dla klasy szóstej szkoły podstawowej. Dział Zagadnienia Wymagania podstawowe Wymagania ponadpodstawowe Arkusz kalkulacyjny (Microsoft Excel i OpenOffice) Uruchomienie

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy

Bardziej szczegółowo

Podstawy technologii WWW

Podstawy technologii WWW Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer

Bardziej szczegółowo

Zadanie 9. Projektowanie stron dokumentu

Zadanie 9. Projektowanie stron dokumentu Zadanie 9. Projektowanie stron dokumentu Przygotowany dokument można: wydrukować i oprawić, zapisać jako strona sieci Web i opublikować w Internecie przekonwertować na format PDF i udostępnić w postaci

Bardziej szczegółowo

Wykład 1: HTML (XHTML) Michał Drabik

Wykład 1: HTML (XHTML) Michał Drabik Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

KATEGORIA OBSZAR WIEDZY

KATEGORIA OBSZAR WIEDZY Moduł 3 - Przetwarzanie tekstów - od kandydata wymaga się zaprezentowania umiejętności wykorzystywania programu do edycji tekstu. Kandydat powinien wykonać zadania o charakterze podstawowym związane z

Bardziej szczegółowo

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Uruchamianie edytora OpenOffice.ux.pl Writer 9 Dostosowywanie środowiska pracy 11 Menu Widok 14 Ustawienia dokumentu 16 Rozdział 2. OpenOffice

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

Formatowanie tekstu za pomocą zdefiniowanych stylów. Włączanie okna stylów. 1. zaznaczyć tekst, który chcemy formatować

Formatowanie tekstu za pomocą zdefiniowanych stylów. Włączanie okna stylów. 1. zaznaczyć tekst, który chcemy formatować Style Bardzo często w edytorze podczas pisania tekstu zachodzi potrzeba wielokrotnego powtórzenia czynności związanych z formatowaniem. Aby zapobiec stałemu otwieraniu okien dialogowych i wybierania stale

Bardziej szczegółowo

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt Zadanie: Utwórz szablon rysunkowy składający się z: - warstw - tabelki rysunkowej w postaci bloku (według wzoru poniżej)

Bardziej szczegółowo

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow

LEGISLATOR. Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow LEGISLATOR Dokument zawiera opis sposobu tworzenia podpisów pod aktami dla celów wizualizacji na wydrukach Data dokumentu:24 maja 2013 Wersja: 1.3 Autor: Paweł Jankowski, Piotr Jegorow Zawartość Wprowadzenie...

Bardziej szczegółowo

Zastanawiałeś się może, dlaczego Twój współpracownik,

Zastanawiałeś się może, dlaczego Twój współpracownik, Kurs Makra dla początkujących Wiadomości wstępne VBI/01 Piotr Dynia, specjalista ds. MS Office Czas, który poświęcisz na naukę tego zagadnienia, to 15 20 minut. Zastanawiałeś się może, dlaczego Twój współpracownik,

Bardziej szczegółowo

EDYCJA TEKSTU MS WORDPAD

EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny

Bardziej szczegółowo

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki

Bardziej szczegółowo

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language

Bardziej szczegółowo

Rozdział 5: Style tekstu

Rozdział 5: Style tekstu 5. STYLE TEKSTU Posługując się edytorem MS Word trudno nie korzystać z możliwości jaką daje szybkie formatowanie z użyciem stylów. Stylem określa się zestaw parametrów formatowych, któremu nadano określoną

Bardziej szczegółowo

Formularze w programie Word

Formularze w programie Word Formularze w programie Word Formularz to dokument o określonej strukturze, zawierający puste pola do wypełnienia, czyli pola formularza, w których wprowadza się informacje. Uzyskane informacje można następnie

Bardziej szczegółowo

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML.

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 23 lutego 2006 roku Czas trwania zajęć: 45 minut, przedmiot: TI Temat lekcji: Pierwsze kroki w języku

Bardziej szczegółowo

Ćwiczenie 4 Konspekt numerowany

Ćwiczenie 4 Konspekt numerowany Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe

Bardziej szczegółowo

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV I OKRES Sprawności 1. Komputery i programy konieczne (ocena: dopuszczający) wymienia z pomocą nauczyciela podstawowe zasady bezpiecznej pracy z komputerem;

Bardziej szczegółowo

Czcionki bezszeryfowe

Czcionki bezszeryfowe Czcionki szeryfowe Czcionki szeryfowe wyposażone są w dodatkowe elementy ułatwiające czytanie. Elementy te, umieszczone w dolnej i górnej części liter tworzą poziome, optyczne linie ułatwiające prowadzenie

Bardziej szczegółowo

Tworzenie prezentacji w MS PowerPoint

Tworzenie prezentacji w MS PowerPoint Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje

Bardziej szczegółowo

Samouczek do korzystania z dokumentów Google

Samouczek do korzystania z dokumentów Google Samouczek do korzystania z dokumentów Google dr Paweł Cieśla dr Małgorzata Nodzyńska Uniwersytet Pedagogiczny, im. Komisji Edukacji Narodowej, Kraków1 Samouczek do korzystania z dokumentów Google: Dokumenty

Bardziej szczegółowo

Temat 1. Więcej o opracowywaniu tekstu

Temat 1. Więcej o opracowywaniu tekstu Temat 1. Więcej o opracowywaniu tekstu Cele edukacyjne Celem tematu 1. jest uporządkowanie i rozszerzenie wiedzy uczniów na temat opracowywania dokumentów tekstowych (m.in. stosowania tabulatorów, spacji

Bardziej szczegółowo

Wiadomości i umiejętności

Wiadomości i umiejętności Kryteria oceniania wiadomości i umiejętności uczniów z informatyki. Zakres wymagań na poszczególne oceny szkolne dla klas IV VI do programu nauczania Przygoda z komputerem DKW 4014 125/00 Opracował: mgr

Bardziej szczegółowo

Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów

Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów Zadanie 10. Stosowanie dokumentu głównego do organizowania dużych projektów Za pomocą edytora Word można pracować zespołowo nad jednym dużym projektem (dokumentem). Tworzy się wówczas dokument główny,

Bardziej szczegółowo

1.5. Formatowanie dokumentu

1.5. Formatowanie dokumentu Komputerowa edycja tekstu 29 1.5. Formatowanie dokumentu Pisanie, kopiowanie czy przenoszenie tekstu to jedynie część naszej pracy z dokumentem. O tym, jak będzie się on prezentował, decydujemy, wykonując

Bardziej szczegółowo

Stawiamy pierwsze kroki

Stawiamy pierwsze kroki Stawiamy pierwsze kroki 3.1. Stawiamy pierwsze kroki Edytory tekstu to najbardziej popularna odmiana programów służących do wprowadzania i zmieniania (czyli edytowania) tekstów. Zalicza się je do programów

Bardziej szczegółowo

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe

Nawigacja po długim dokumencie może być męcząca, dlatego warto poznać następujące skróty klawiszowe Zestawienie wydatków rok 2015 1 Wstaw numerację stron. Aby to zrobić przejdź na zakładkę Wstawianie i w grupie Nagłówek i stopka wybierz Numer strony. Następnie określ pozycję numeru na stronie (na przykład

Bardziej szczegółowo

Kadry Optivum, Płace Optivum

Kadry Optivum, Płace Optivum Kadry Optivum, Płace Optivum Jak seryjnie przygotować wykazy absencji pracowników? W celu przygotowania pism zawierających wykazy nieobecności pracowników skorzystamy z mechanizmu Nowe wydruki seryjne.

Bardziej szczegółowo

Jak posługiwać się edytorem treści

Jak posługiwać się edytorem treści Jak posługiwać się edytorem treści Edytor CKE jest bardzo prostym narzędziem pomagającym osobom niezaznajomionym z językiem HTML w tworzeniu interaktywnych treści stron internetowych. Razem z praktyka

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

1. Wstawianie macierzy

1. Wstawianie macierzy 1. Wstawianie macierzy Aby otworzyć edytor równań: Wstaw Obiekt Formuła Aby utworzyć macierz najpierw wybieramy Nawiasy i kilkamy w potrzebny nawias (zmieniający rozmiar). Następnie w oknie formuły zamiast

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS Cel ćwiczenia: zapoznanie się z pojęciem stylów w dokumentach. Umiejętność stosowania stylów do automatycznego przygotowania

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 1 mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Kontakt http://wierzba.wzks.uj.edu.pl/~kwrobel/ k.wrobel@epi.uj.edu.pl konsultacje, pokój 3.211 2 Bilans

Bardziej szczegółowo

Tematy lekcji informatyki klasa 4a luty/marzec 2013

Tematy lekcji informatyki klasa 4a luty/marzec 2013 Tematy lekcji informatyki klasa 4a luty/marzec 2013 temat 11. z podręcznika (str. 116-120) Jak uruchomić edytor tekstu MS Word 2007? ćwiczenia 2-5 (str. 117-120); Co to jest przycisk Office? W jaki sposób

Bardziej szczegółowo

BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT

BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT BIBLIOTEKA LOKALNE CENTRUM WIEDZY PRAKTYCZNEJ PRZEWODNIK PO NARZĘDZIACH WARSZTAT NR 1: ARKUSZE KALKULACYJNE - MINI SKRYPT 1. Wprowadzenie Arkusze kalkulacyjne Google umożliwiają łatwe tworzenie, udostępnianie

Bardziej szczegółowo

WebAdministrator GOLD 2.35

WebAdministrator GOLD 2.35 WebAdministrator GOLD 2.35 Szybki start Niniejsza instrukcja przeznaczona jest dla Redaktorów serwisu opartego na systemie zarządzania treścią WebAdministrator Gold. Zebrane tu informacje składają się

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

Tworzenie szablonów użytkownika

Tworzenie szablonów użytkownika Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ

INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ INSTRUKCJA OBSŁUGI BIULETYNU INFORMACJI PUBLICZNEJ W celu wprowadzenia, modyfikacji lub usunięcia informacji w Biuletynie Informacji Publicznej należy wpisać w przeglądarce adres strony: http:/bip.moriw.pl/admin.php

Bardziej szczegółowo

ZAJĘCIA KOMPUTEROWE KLASA IV. Opis wymagań, które uczeń powinien spełnić, aby uzyskać ocenę:

ZAJĘCIA KOMPUTEROWE KLASA IV. Opis wymagań, które uczeń powinien spełnić, aby uzyskać ocenę: ZAJĘCIA KOMPUTEROWE KLASA IV Opis wymagań, które uczeń powinien spełnić, aby uzyskać ocenę: CELUJĄCĄ Opanował wiadomości i umiejętności wynikające z programu nauczania na ocenę bardzo dobrą i ponadto:

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Punktowanie i numerowanie

Punktowanie i numerowanie Punktowanie i numerowanie Aby szybko ponumerować lub wypunktować dowolne akapity musimy zaznaczyć wybrany tekst, który ma być punktowany lub numerowany. Następnie wybieramy jedną z ikon na pasku narzędziowym

Bardziej szczegółowo

Jak założyć stronę na blogu?

Jak założyć stronę na blogu? Jak założyć stronę na blogu? lewej stronie widzisz menu: 1. Po zalogowaniu na blog znajdziesz się w panelu administracyjnym. Po 2. Klikasz Strony, a następnie Dodaj nową i otwiera się taki ekran: 1 3.

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,

Bardziej szczegółowo

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda Logowanie do panelu administracyjnego Aby móc zarządzać stroną, należy zalogować się do panelu administracyjnego.

Bardziej szczegółowo

Wymagania na poszczególne oceny w klasach I gimnazjum

Wymagania na poszczególne oceny w klasach I gimnazjum Wymagania na poszczególne oceny w klasach I gimnazjum Prawo autorskie - zagadnienia etyczne i prawne związane z ochroną własności intelektualnej Podstawy języka HTML Tworzenie witryny WWW - tło i obrazki

Bardziej szczegółowo

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w

Bardziej szczegółowo

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I WYMAGANIA EDUKACYJNE Witryny i Aplikacje Internetowe klasa I Dopuszczający definiuje pojęcia: witryna, portal, wortal, struktura witryny internetowej; opisuje rodzaje grafiki statycznej wymienia i charakteryzuje

Bardziej szczegółowo

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Metod na wystawienie aukcji na allegro jest co najmniej 2. W pierwszej przechodzimy do zakładki MOJA SPRZEDAŻ, w USTAWIENIACH SPRZEDAŻY odnajdujemy

Bardziej szczegółowo

Podział na strony, sekcje i kolumny

Podział na strony, sekcje i kolumny Formatowanie stron i sekcji Formatowanie stron odnosi się do całego dokumentu lub jego wybranych sekcji. Dla całych stron ustalamy na przykład marginesy, które określają odległość tekstu od krawędzi papieru.

Bardziej szczegółowo

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3 DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz

Bardziej szczegółowo

O higienie pracy, komputerze, sieciach komputerowych i Internecie

O higienie pracy, komputerze, sieciach komputerowych i Internecie WYMAGANIA EDUKACYJNE INFORMATYKA GIMNAZJUM KLASA I NA ŚRÓDROCZNĄ I ROCZNĄ OCENĘ KLASYFIKACYJNĄ NA ŚRÓDROCZNĄ: O higienie pracy, komputerze, sieciach komputerowych i Internecie - zna regulamin pracowni

Bardziej szczegółowo

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3

Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Wyższa Szkoła Ekologii i Zarządzania Informatyka Edytor tekstów Word 2010 dla WINDOWS cz.3 Slajd 1 Slajd 2 Numerowanie i punktowanie Automatyczne ponumerowanie lub wypunktowanie zaznaczonych akapitów w

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Samouczek edycji dokumentów tekstowych

Samouczek edycji dokumentów tekstowych 1. Różne sposoby zaznaczania tekstu. Najprostszą czynnością, którą możemy wykonać na zaznaczonym tekście, jest jego usunięcie. Wystarczy nacisnąć klawisz Delete lub Backspace. Aby przekonać się, jak to

Bardziej szczegółowo

INFORMATYKA KLASA IV

INFORMATYKA KLASA IV 1 INFORMATYKA KLASA IV WYMAGANIA NA POSZCZEGÓLNE OCENY SZKOLNE 1. Komputer i programy komputerowe Posługiwanie się komputerem i praca z programem komputerowym wymienia przynajmniej trzy podstawowe zasady

Bardziej szczegółowo

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa 4 Wymagania edukacyjne na poszczególne oceny szkolne dla klasy 4

Teraz bajty. Informatyka dla szkoły podstawowej. Klasa 4 Wymagania edukacyjne na poszczególne oceny szkolne dla klasy 4 1 Teraz bajty. Informatyka dla szkoły podstawowej. Klasa 4 Wymagania edukacyjne na poszczególne oceny szkolne dla klasy 4 1. Komputer i programy komputerowe Posługiwanie się komputerem i praca z programem

Bardziej szczegółowo

WYMAGANIA EDUKACYJNE NIEZBĘDNE DO UZYSKANIA POSZCZEGÓLNYCH ŚRODROCZNYCH I ROCZNYCH OCEN Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV

WYMAGANIA EDUKACYJNE NIEZBĘDNE DO UZYSKANIA POSZCZEGÓLNYCH ŚRODROCZNYCH I ROCZNYCH OCEN Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV WYMAGANIA EDUKACYJNE NIEZBĘDNE DO UZYSKANIA POSZCZEGÓLNYCH ŚRODROCZNYCH I ROCZNYCH OCEN Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV dopuszczający dostateczny dobry bardzo dobry celujący Potrafi wymienić Samodzielnie

Bardziej szczegółowo

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu:

Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Jak dodać wpis? Po zalogowaniu na blog znajdujesz się w panelu administracyjnym. Po lewej stronie widzisz menu: Klikasz Wpisy, a następnie Dodaj nowy i otwiera się taki ekran: 1 W tym miejscu tworzysz

Bardziej szczegółowo