Informatyka w zarządzaniu III rok - HTML

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

Download "Informatyka w zarządzaniu III rok - HTML"

Transkrypt

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

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

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

4 4

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

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

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

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

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

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

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

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

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

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

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

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

17 Przykład (złożonej) listy: <ol> (otwarcie listy na pierwszym poziomie) <li> Punkt 1 </li> <li> Punkt 2 (bez znacznika zamykającego) <ol> (otwarcie listy na drugim poziomie) <li> Podpunkt 2.1 </li> <li> Podpunkt 2.2 </li> </ol> (zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li> Punkt 3 (bez znacznika zamykającego) <ol> (otwarcie listy na drugim poziomie) <li> Podpunkt 3.1 </li> <li> Podpunkt 3.2 </li> </ol> (zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 3) </ol> (zamknięcie całej listy) Zadanie 15. Zmodyfikuj właściwie tekst źródłowy stworzony w poprzednim zadaniu, aby uzyskać następujący efekt: Listy wypunktowane: Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego, w którym kolejne punkty są wyróżniane punktorami. Polecenie <ul> </ul> (od unordered list) tworzy ramy wykazu, natomiast polecenia <li> </li> (od list item element listy )wprowadzają konkretne punkty. Znacznik <ul> 17

18 Argumenty: list-style-type: disc o circle niewypełnione koło square wypełniony kwadrat Np: <ul style="list-style-type: disc"> Możemy zagnieżdżać kilka poziomów listy nieuporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem. <ul> (otwarcie listy na pierwszym poziomie) <li> Punkt 1 </li> <li> Punkt 2 (bez znacznika zamykającego) <ul> (otwarcie listy na drugim poziomie) <li> Podpunkt 2.1 </li> <li> Podpunkt 2.2 (bez znacznika zamykającego) <ul> (otwarcie listy na trzecim poziomie) <li> Podpunkt </li> <li> Podpunkt </li> </ul> (zamknięcie listy na trzecim poziomie) </li> (zamknięcie podpunktu 2.2) </ul> (zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li> Punkt 3 (kontynuacja punktów pierwszego poziomu) </li> <li> Punkt 4 </li> </ul> (zamknięcie całej listy) W przypadku listy nienumerowanej również można dowolnie stosować atrybuty dla sposobu wyświetlenia podpunktów na różnych poziomach. Zadanie 16. Przekształć listę z zadania 15. w listę wypunktowaną, tak aby osiągnąć podany poniżej efekt: 18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38 5. Dymek narzędziowy W celu uzyskania dodatkowych informacji o stronie, do której ma nastąpić przeniesienie możemy zastosować dodatkowy znacznik, który skutkuje tym, że po wskazaniu odsyłacza myszką, wyświetli się tekst pomocniczy w "dymku" narzędziowym. Wymagane jest tu zastosowanie atrybutu title="...". <a href="odsyłacz tworzony jak wcześniej" title="treść podana w dymku">treść odsyłacza</a> Zadanie 32. Dodaj dymek narzędziowy o treści Wyślij do manie do właściwej opcji na stronie z listą Najnowsze artykuły. 8. Arkusze stylów Arkusze stylów służą do formatowania treści i wyglądu strony. Arkusz stylów składa się z jednej lub większej liczby instrukcji stylów (nazywanych regułami) opisujących, w jaki sposób element lub grupa elementów powinny być wyświetlane. Pierwszym krokiem w nauce CSS jest zapoznanie się z częściami reguły. Są one dość intuicyjne. Każda reguła wybiera element i deklaruje, w jaki sposób powinien on działać. Poniższy przykład zawiera regułę, która sprawia, że wszystkie elementy <h1> w dokumencie będą zielone: h1 { color: green; } W terminologii CSS dwie główne części reguły to selektor (ang. selector) identyfikujący element lub elementy, na które reguła ma wpływ, oraz deklaracja zawierająca instrukcje dotyczące wyświetlania. Deklaracja z kolei składa się z właściwości (ang. properties) (takiej jak color) oraz jej wartości (ang. values) (jak green) rozdzielonych dwukropkiem i spacją. Deklaracje umieszcza się wewnątrz nawiasów klamrowych. Deklaracja składa się z pary właściwość-wartość. W pojedynczej regule może znajdować się większa liczba deklaracji. Każda deklaracja musi się kończyć średnikiem w celu oddzielenia jej od kolejnej deklaracji. Nawiasy klamrowe oraz deklaracje, które one zawierają, często określa się mianem bloku deklaracji (ang. declaration block). Sposoby umieszczania stylów w dokumentach HTML określane są jako: 1. Style wbudowane (in-line) formatowanie konkretnego elementu w dokumencie HTML a. Stosuje się tu atrybut style w poszczególnym znaczniku HTML (np. <p>, <h1>, <hr/>) np. <selektor style="cecha: wartość; cecha2: wartość2...">...</selektor> 38

39 Styl wbudowany pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Dlatego właśnie styl tego rodzaju nazywa się także styl in-line (ang. "w linii"), ponieważ jest wstawiany w tej samej linii, w której znajduje się element formatowany. O tym, który to będzie element, decyduje słowo kluczowe "selektor" (widoczny powyżej, w deklaracji stylu). Właściwości oraz wartości można więc zastosować do pojedynczego elementu za pomocą atrybutu style umieszczonego w tym elemencie, jak poniżej: <h1 style= color: red >Wprowadzenie</h1> By dodać kilka właściwości, wystarczy rozdzielić je średnikami, jak w poniższym przykładzie: <h1 style= color: red; margin-top: 2em >Wprowadzenie</h1> Style wewnętrzne (ang. inline styles) mają zastosowanie tylko do elementu, w którym się pojawiły. Powinno się unikać ich stosowania, o ile nadpisanie stylów pochodzących z osadzonego lub zewnętrznego arkusza stylów nie jest absolutnie konieczne. Style wewnętrzne są dość problematyczne, ponieważ umieszczają one informacje o prezentacji wewnątrz kodu nadającego dokumentowi strukturę. Sprawiają także, że wprowadzanie zmian jest o wiele trudniejsze, ponieważ w kodzie źródłowym trzeba w takim przypadku odnaleźć każde wystąpienie atrybutu style. 2. Style osadzone (embedded), zwane inaczej stylami wewnętrznymi (internal) formatują całe dokumenty a. Stosuje się element (znacznik) <style> w sekcji <head> <html> <head> <style type= text/css > selektor 1{ cecha: wartość; cecha2: wartość2... } selektor 2{ cecha: wartość; cecha2: wartość2... } </style> </head> <body> </body> </html> Umieszczane są w dokumencie za pomocą elementu style, a ich reguły odnoszą się tylko do danego dokumentu. Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>) i musi zawierać atrybut type identyfikujący zawartość elementu style jako text/css (aktualnie jest to jedyna dopuszczalna wartość). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie paragrafy miały automatycznie kolor zielony. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie. Poniższy przykład zawiera również komentarz Czasami przydaje się możliwość pozostawienia w arkuszu stylów komentarzy. Specyfikacja CSS ma własną składnię komentarzy, zaprezentowaną poniżej: /* miejsce na komentarz */ 39

40 Treść znajdująca się pomiędzy znakami /* oraz */ zostanie zignorowana podczas analizy arkusza stylów, co oznacza, że komentarz można zostawić w dowolnym miejscu arkusza nawet wewnątrz reguły, np.: body { font-size: small; /* tymczasowo */ }). <head> <title>miejsce na wymagany tytuł dokumentu</title> <style type= text/css > /* miejsce na reguły stylow */ </style> </head> 3. Style dołączane, inaczej zwane zewnętrznymi (external) a. Stosuje się odnośnik do zewnętrznego arkusza stylów CSS, w którym określony jest wygląd poszczególnych elementów na stronie W pliku HTML wstawiamy link do pliku CSS: <html> <head> <link rel="stylesheet" type="text/css" href="nazwa_pliku.css" /> </head> <body> </body> </html> W pliku CSS wstawiamy: selektor 1{ cecha: wartość; cecha2: wartość2... } selektor 2{ cecha: wartość; cecha2: wartość2... } W elemencie link należy podać trzy atrybuty: rel= stylesheet - Definiuje relację dokumentu z odnośnika z dokumentem bieżącym. Kiedy podaje się odnośnik do arkusza stylów, atrybut ten ma zawsze wartość stylesheet. type= text/css - Identyfikuje typ danych arkusza stylów jako text/css (aktualnie jest to jedyna dostępna opcja). href= url - Podaje lokalizację (adres URL) pliku.css. W dokumencie można podać większą liczbę elementów link odnoszących się do rożnych arkuszy stylów i wszystkie one będą miały zastosowanie. Jeśli wystąpią między nimi konflikty, ten wymieniony jako ostatni nadpisze poprzednie ustawienia zgodnie z kolejnością reguł oraz kaskadą. 40

41 Zewnętrzny arkusz stylów jest odrębnym dokumentem tekstowym, który zawiera pewną liczbę reguł stylów. Musi mieć rozszerzenie.css. Odnośnik do tego dokumentu.css podawany jest następnie w dokumentach (X)HTML lub też jest do nich importowany. Pozwala on zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza stylów (.css), wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy. W ten sposób wszystkie liki witryny internetowej mogą korzystać z jednego arkusza stylów. To rozwiązanie daje największe możliwości i jest też preferowaną metodą dołączania arkuszy stylów do treści dokumentów. Jeśli w ostatniej chwili zdecydujemy się zmienić np. rodzaj czcionki na wszystkich stronach, możemy to zrobić, modyfikując jedynie zewnętrzny arkusz stylów, bez konieczności zmiany każdej strony osobno. Zadanie 33. a) Przekształć poprzednie zadanie 24 (gdzie formatowane były kolory czcionek, tło, linie przy użyciu stylu wbudowanego) w ten sposób, aby wygląd strony pozostał bez zmian, ale aby został zastosowany styl osadzony (wewnętrzny) do sformatowania strony. b) Przekształć poprzednie zadanie 24 (gdzie formatowane były kolory czcionek, tło, linie przy użyciu stylu wbudowanego) w ten sposób, aby wygląd strony pozostał bez zmian, ale aby został zastosowany styl zewnętrzny do sformatowania strony (arkusz stylów nazwij style.css). Kaskadowe arkusze stylów Style trzech wcześniej omawianych rodzajów (dołączane, osadzane i wbudowane) mogą być swobodnie ze sobą mieszane w tym samym dokumencie. Na przykład: na naszej stronie używamy zewnętrznego arkusza stylów, deklaracji stylów w nagłówku strony, a także stylów typu inline, przy czym dotyczą one formatowania dokładnie tego samego elementu (np. kroju czcionki). Co się stanie w takim przypadku? Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze względu na kaskadowość. Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł. To od niej wzięły swoją nazwę style: CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów. 41

42 Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak: 1. Styl wbudowany/lokalny (inline) 2. Rozciąganie stylu (<span>) 3. Wydzielone bloki (<div>) 4. Osadzony/Wewnętrzny arkusz stylów 5. Import stylów do wewnętrznego arkusza 6. Dołączany/Zewnętrzny arkusz stylów 7. Import stylów do zewnętrznego arkusza 8. (Atrybuty prezentacyjne HTML - np. align="...", bgcolor="...", color="...", height="...", width="..." i inne) Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego. Zadanie 34. W poprzednim ćwiczeniu, gdzie styl formatowania został ustawiony jako styl zewnętrzny (w arkuszu style.css) dodaj w pojedynczym paragrafie lub nagłówku inne formatowanie (inny kolor czcionki) w celu sprawdzenia, który z nich będzie stanowił wartość nadrzędną odczytywaną przez przeglądarkę. Szczegółowe przykłady formatowania: np. hr { Kilka cech dla jednego selektora: color: red; background-color: red; height: 10px; width: 50%;} Jedna cecha dla kilku selektorów np. h1, h2, h3, h4, h5, h6 { color: red} Jeśli chce się zastosować tę samą właściwość stylu do większej liczby elementów, można pogrupować selektory w jedną regułę, rozdzielając je przecinkami. Jedna reguła daje wtedy ten sam efekt co pięć reguł wymienionych wcześniej. Pogrupowanie ich sprawia, że przyszłe edycje dokumentu wykonywane będą w sposób bardziej wydajny, a dodatkowo sam plik będzie miał mniejszy rozmiar, np.: Teraz znamy już dwa rodzaje selektorów prosty selektor elementów oraz selektory pogrupowane. 42

43 Element zagnieżdżone (np. listy) np. ul {list-style-type: square} - pierwszy poziom ul ul {list-style-type: disc} - drugi poziom ul ul ul {list-style-type: circle} - trzeci poziom Wielkość liter: font-size np. h1 { color: red; font-size: 1.5em;} Jednostki miary w CSS W specyfikacji CSS2 podano różne jednostki miary. Generalnie dzielą się one na dwie ogólne kategorie: bezwzględne oraz względne. Jednostki bezwzględne Jednostki bezwzględne mają zdefiniowane znaczenie lub odpowiedniki w świecie rzeczywistym. pt punkty (zgodnie z CSS2.1, 1 punkt równy jest 1/72 cala) pc pica (1 pica = 12 punktów) mm milimetry cm centymetry in cale Powinno się unikać określania wielkości na stronach internetowych w jednostkach bezwzględnych, ponieważ nie są one właściwe dla ekranu komputera. Jeśli jednak tworzy się arkusz stylów dla dokumentu drukowanego, jednostki bezwzględne są dobrym rozwiązaniem. Jednostki względne Jednostki względne oparte są na jakiejś innej wielkości, na przykład domyślnej wielkości tekstu czy rozmiarze elementu rodzica. em jednostka miary odpowiadająca aktualnej czcionce ex wielkość zbliżona do wysokości litery x danej czcionki px piksel; zaliczany do jednostek względnych, ponieważ jego wielkość różni się w zależności od rozdzielczości ekranu w szczególności w przypadku porównania niskiej rozdzielczości ekranu z wysoką rozdzielczością materiałów drukowanych % wartości procentowe; choć nie są jednostką miary, są innym sposobem na określenie wielkości w sposób względny Zaleca się wykorzystywanie em, wartości procentowych oraz połączenia tych dwóch możliwości w określaniu wielkości tekstu. Rozmiar/wielkość tekstu można określić na kilka sposobów: o Podając wartość procentową, zmniejszającą lub zwiększającą rozmiar domyślny lub odziedziczony elementu: h1 { font-size: 150%; } W poniższym przykładzie właściwość font-size elementu będącego rodzicem nagłówka h1 (czyli body) ma wartość szesnastu pikseli, dlatego wielkość tekstu w h1 musiałaby mieć wartość równą stu pięćdziesięciu procentom z szesnastu, czyli dwudziestu czterem pikselom: body { font-size: 16px; } h1 { font-size: 150%; } /* 150% z 16 = 24 */ Jeśli nigdzie nie podano wartości font-size, miary względne oparte są na bazowej czcionce domyślnej przeglądarki, która w większości programów ma wielkość szesnastu pikseli. Użytkownicy mogą 43

44 oczywiście zmienić wartość czcionki bazowej, zarówno powiększając ją, jak i pomniejszając, dlatego nie ma żadnej gwarancji, jaki będzie rozmiar wyjściowy. Można co najwyżej zgadywać. o Podając konkretną wartość z wykorzystaniem jednej z miar długości używanych w CSS jak poniżej: h1 { font-size: 1.5em; } Kiedy podaje się wielkość jako liczbę jednostek, nie należy wstawiać znaku spacji pomiędzy liczbą a skrótem jednostki, jak poniżej: NIEPOPRAWNE h1 { font-size: 1.5 em; } /* spacja przed em */ W przypadku rozmiaru tekstu wartość w em działa jak współczynnik skalujący podobny do procentów. Jak w poprzednim przykładzie, jeśli czcionka bazowa ma wielkość szesnastu pikseli, nadanie elementom h1 właściwości font-size o wartości 1.5em sprawi, że nagłówki te będą miały dwadzieścia cztery piksele wysokości. body { font-size: 16px; } h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ W większości przypadków em oraz procenty mogą być używane wymiennie, kiedy określa się wielkość czcionki. Najczęściej zależy to od upodobań autora dokumentu. Istnieje jednak kilka trudności związanych z pracą z em. Jedna z nich polega na tym, że ze względu na błędy w zaokrąglaniu istnieje wiele niespójności pomiędzy rożnymi przeglądarkami i platformami, kiedy rozmiar tekstu ustawiony jest na części ułamkowe em. Istnieją również udokumentowane problemy z przeglądarką Internet Explorer, kiedy właściwość font-size ma ustawioną wartość mniejszą od 1em. Najbezpieczniej będzie wykorzystywać em do skalowania tekstu w gorę. o Wykorzystując jedno z bezwzględnych słów kluczowych: xx-small (bardzo, bardzo mała), x -small (bardzo mała), small (mała), medium (średnia), large (duża), x-large (bardzo duża), xx-large (bardzo, bardzo duża). W większości aktualnych przeglądarek medium odpowiada domyślnej wielkości czcionki: h1 { font-size: x-large; } o Wykorzystując względne słowo kluczowe (larger większa lub smaller mniejsza) w celu wyświetlenia tekstu jako większy lub mniejszy od otaczającego go: h1 { font-size: larger; } Pomimo istnienia wszystkich tych opcji jedynymi akceptowanymi wartościami dla właściwości fontsize w nowoczesnym projektowaniu stron internetowych są wielkości podawane w em, wartościach procentowych oraz za pomocą słów kluczowych. 44

45 Są one preferowane, ponieważ pozwalają użytkownikom na zmianę wielkości tekstu z wykorzystaniem opcji dostępnej w przeglądarce. Oznacza to, że można dowolnie zmieniać rozmiar tekstu (na przykład definiować go jako mniejszy od najczęściej spotykanego domyślnego rozmiaru szesnastu pikseli), jednak jednocześnie zachować pewność, że użytkownicy będą mogli powiększyć tekst, jeśli będą mieli taką potrzebę lub chęć. Choć może się wydawać kuszące, by podawać tekst w pikselach, żadna z wersji przeglądarki Internet Explorer nie pozwala na zmianę wielkości tekstu zdefiniowanego w pikselach. Oznacza to, że użytkownicy zostaną pozostawieni z czcionką o wielkości dziesięciu czy jedenastu pikseli, nawet jeśli nie będą jej w stanie odczytać. Absolutnie nie powinno się tego robić ze względu na dostępność strony. Dodatkowo wszystkie jednostki bezwzględne, takie jak pt, pc, in, mm oraz cm, są odrzucane, ponieważ nie mają zastosowania do monitorów komputerów (choć mogą być użyteczne w arkuszach stylów przeznaczonych dla druku). Czcionka: font-family: W arkuszu stylu (wewnętrznym lub zewnętrznym) do wyboru kroju czcionki czy też rodziny czcionek stosujemy właściwość font family, np.: p {font-family: Arial, Helvetica, sans-serif} W znaczniku (stylu in-line): <p style="font-family: Arial, Helvetica, sans-serif"> Podanie kilku rodzajów czcionek spowoduje, że jeśli użytkownik nie będzie posiadał pierwszego, to zostanie wybrany następny w kolejności. Najlepszym sposobem na określenie czcionek dla strony internetowej jest rozpoczęcie od naszego pierwszego wyboru, podanie podobnych alternatyw, a na końcu podanie rodziny gatunkowej, by użytkownicy mogli otrzymać przynajmniej czcionkę o właściwym stylu. Właściwość font-family wykorzystuje się do podania czcionki lub listy czcionek zgodnie z ich nazwami, jak w poniższych przykładach: body { font-family: Arial; } h1 { font-family: Courier, monospace; } p { font-family: Trebuchet MS, Verdana, sans-serif; } Wszystkie nazwy czcionek z wyjątkiem rodzin gatunkowych muszą być pisane wielką literą, jak na przykład Arial w miejsce arial. Warto zwrócić uwagę na to, że nazwy czcionek zawierające znaki spacji (jak Trebuchet MS w trzecim przykładzie) muszą znajdować się w cudzysłowie. Przecinkami rozdziela się z kolei kilka nazw czcionek, co widać w drugim i trzecim przykładzie. Oprócz podania rodzaju czcionki wprost, możliwe jest także wpisanie rodziny ogólnej: o serif - czcionka szeryfowa (końcówki znaków posiadają "ozdobniki" - dekoracyjne szeryfy, wyglądające jak niewielkie pociągnięcia pędzlem, na końcu niektórych kresek liter), np.: Times New Roman, Georgia, Garamond, Bodoni o sans-serif - czcionka bezszeryfowa (końcówki znaków są proste - mają proste kreski liter, na końcach których brakuje szeryfow, generalnie uznawane są za łatwiejsze do odczytania na ekranie komputera), np.: Arial, Verdana, "Trebuchet MS, Helvetica, Univers, Futura o monospace - czcionka o stałej szerokości znaków - monotypiczna (wygląda, jak pisana na maszynie) - wszystkie znaki zajmują tę samą ilość miejsca w wierszu. Wielka litera W nie będzie na przykład szersza od małego i, np.: Courier, Courier New, Andale Mono 45

46 o cursive - czcionka mająca pewne cechy pochyłej (wygląda, jak pisana ręcznie) - rzadko są stosowane na profesjonalnych stronach internetowych, np. Apple Chancery, Zapf- Chancery, Comic Sans o fantasy - czcionka fantazyjna (dekoracyjna) - mają czysto dekoracyjny charakter i nadają się do zastosowania w nagłówkach i podobnych elementach strony. Czcionki fantazyjne rzadko wykorzystywane są na stronach internetowych ze względu na brak dostępności na rożnych platformach oraz ograniczoną czytelność.,np. Impact, Western Style czcionki: o Pogrubienie: font-weight normal - czcionka normalna (podstawowa) bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości np. p {font-weight: bold} <p style="font-weight: bold"> w sekwencji, 46

47 o Kursywa: font-style normal - czcionka normalna (podstawowa) italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio - Różnica polega na tym, że italic to tak naprawdę osobno zaprojektowany krój czcionki z nachylonymi literami, natomiast oblique to zwykły krój czcionki nachylony przez przeglądarkę, w większości przeglądarek oba mogą wyglądać identycznie, np. p {font-style: italic} <p style="font-style: italic"> Skrótowy zapis wielu ustawień czcionki (dla właściwości font): Określanie właściwości dotyczących czcionki dla każdego elementu tekstowego mogłoby szybko stać się niepotrzebnym powtarzaniem tego samego, dlatego twórcy CSS udostępnili skrótową właściwość font, która zbiera wszystkie właściwości powiązane z czcionką w jedną regułę. Wartość właściwości font to rozdzielona spacjami lista wartości dla wszystkich właściwości dotyczących czcionek, jakie właśnie omówiliśmy. W tej właściwości kolejność wartości jest istotna: { font: font-style font-weight font-variant font-size font-family } Właściwość font musi zawierać przynajmniej wartość font-size oraz font-family w tej właśnie kolejności. Pominięcie jednej z tych wartości lub umieszczenie ich w złej kolejności sprawia, że cała reguła staje się nieważna. Poniżej znajduje się przykład minimalnej właściwości font: p { font: 1em sans-serif; } Po spełnieniu wymagań związanych z umieszczeniem rozmiaru oraz rodziny czcionek pozostałe wartości są opcjonalne i mogą się pojawić w dowolnej kolejności przed wartością font-size. Jeśli pominięte zostaną wartości dotyczące stylu, wagi lub wariantu czcionki, zostaną one ustawione na wartość normal. Dekoracja tekstu: text-decoration p{text-decoration: underline} inne: - none - bez zmian - underline - podkreślenie - line-through - przekreślenie - overline - nadkreślenie - blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera) Najczęściej spotykanym zastosowaniem właściwości text-decoration jest wyłączenie domyślnego podkreślenia pod odnośnikami w następujący sposób: a { text-decoration: none; } Podkreślenia mocno kojarzą się z zachęceniem do kliknięcia czegoś, więc podkreślanie tekstu, który nie jest odnośnikiem, może być mylące i denerwujące. Należy się zastanowić, czy zastosowanie w tym kontekście kursywy nie będzie lepszym rozwiązaniem. 47

48 Ułożenie tekstu (wyrównanie): text-align h1 {text-align: center} inne wartości argumentu text-align: - left - wyrównanie do lewej - center - wyśrodkowanie - right - wyrównanie do prawej - justify - wyjustowanie Odstępy: o Miedzy literami: letter-spacing <p style="letter-spacing: 1px> Ten tekst będzie zawierał określona szerokość miedzy literami.</p> p {letter-spacing: 1px} p{ letter-spacing: 1.5em} o Miedzy wyrazami: word-spacing h1, h2, p {word-spacing: 4px} h1, h2, p {word-spacing: 4em} o Między wierszami / wysokość wiersza (interlinia): line-height p {line-height: 2} p { line-height: 2em; } p {line-height: 200%} 48

49 Kiedy podana jest po prostu liczba, jak w pierwszym przykładzie, działa ona jak współczynnik skalujący, który w celu obliczenia wartości wysokości wiersza mnożony jest przez aktualny rozmiar czcionki. Wysokość wiersza można również podać z wykorzystaniem jednej z jednostek długości CSS i tu, podobnie jak wcześniej najlepszym wyborem będzie em. Wartości w em oraz wartości procentowe oparte są na aktualnym rozmiarze czcionki. We wszystkich trzech przykładach, jeśli rozmiar tekstu wynosi szesnaście pikseli, obliczona wysokość wiersza będzie miała wartość trzydziestu dwóch pikseli. Wysokość wiersza jest podobna do interlinii stosowanej w tradycyjnym składzie druku. Choć wysokość wiersza obliczana jest jako odległość między liniami bazowymi (linia bazowa (ang. baseline) to fikcyjna linia, na której znajdują się dolne części liter), większość przeglądarek dzieli dodatkowy odstęp pomiędzy miejsce nad wierszem oraz pod nim, tym samym wyśrodkowując tekst wewnątrz określonej wysokości wiersza Akapity: o Wcięcie pierwszego wiersza w nowym akapicie: text-indent p {text-indent: 20px} Właściwość text-indent może otrzymać wartość procentową lub miarę długości. Wartości procentowe obliczane są w stosunku do szerokości elementu rodzica. Poniżej znajduje się kilka przykładów. p { text-indent: 2em; } p { text-indent: 25%; } p { text-indent: -35px; } W trzecim przykładzie podano wartość ujemną i jest to całkowicie poprawne. Sprawi to, że pierwszy wiersz tekstu będzie wystawał poza lewą krawędź tekstu (takie wcięcie nazywane jest wystającym). 49

50 Marginesy Każdy element dokumentu zarówno blokowy, jak i wewnętrzny generuje prostokątny pojemnik elementu Obszar zawartości elementu - W centrum pojemnika elementu znajduje się sama zawartość elementu. Na rysunku obszar zawartości elementu (ang. content area) to tekst w białym prostokącie. Krawędź wewnętrzna - Krawędź obszaru zawartości elementu określana jest mianem krawędzi wewnętrznej (ang. inner edge) pojemnika elementu. To pojemnik, który zmienia swój rozmiar, kiedy zastosuje się właściwości height oraz width. Choć krawędź wewnętrzna jest na rysunku wyróżniona innym kolorem, na prawdziwych stronach internetowych będzie ona niewidoczna. Dopełnienie - Dopełnienie (ang. padding) to obszar znajdujący się pomiędzy obszarem zawartości elementu a opcjonalnym obramowaniem. Na diagramie obszar dope łnienia oznaczony jest przez żółtopomarańczowy kolor. Dopełnienie jest opcjonalne. Obramowanie - Obramowanie (ang. border) to linia (lub wystylizowania linia) otaczająca element oraz jego dopełnienie. Obramowanie jest opcjonalne. Margines - Margines (ang. margin) jest opcjonalną wielkością odstępu dodaną na zewnątrz obramowania. Na diagramie margines oznaczony jest jasnoniebieskim odcieniem, jednak w rzeczywistości marginesy zawsze są przezroczyste. Krawędź zewnętrzna - Krawędź zewnętrzna obszaru marginesów stanowi krawędź zewnętrzną (ang. outer edge) pojemnika elementu. To całkowity obszar, jaki element zajmuje na stronie, zawierający szerokość obszaru jego zawartości wraz z całkowitą szerokością dopełnienia, obramowania oraz marginesów mających zastosowanie do elementu. Krawędź zewnętrzna jest na diagramie oznaczona linią kropkowaną, jednak w rzeczywistości jest ona na stronie internetowej niewidoczna. o Marginesy: margin Marginesy zapobiegają bliskiemu stykaniu się elementów ze sobą lub z krawędzią okna przeglądarki body { lub w skrócie: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;} każdy margines ustawiany osobno margin: 100px 40px 10px 70px} kiedy poda się cztery wartości, zostaną one zastosowane w kolejności zgodnej z ruchem wskazówek zegara (góra, prawo, dół, lewo). 50

51 body { body{ body { margin: 10px 20px 30px} jeśli podane zostaną trzy wartości, środkowa będzie się odnosiła do prawego i lewego boku, pierwsza do góry, a trzecia do dołu margin: 10px 20px} pierwsza wartość ustawia górę i dół, druga prawą i lewą stronę margin: 20px} wszystkie marginesy będą takie same gdzie: Najważniejszą kwestią dotyczącą marginesów, o jakiej trzeba pamiętać, jest to, że marginesy górne oraz dolne sąsiadujących elementów składają się (ang. collapse). Oznacza to, że zamiast się kumulować, przylegające marginesy nakładają się na siebie i wykorzystana zostaje jedynie większa wartość. 51

52 o Margines wewnętrzny (wypełnienie, dopełnienie): padding Dopełnienie to obszar pomiędzy obszarem zawartości elementu a obramowaniem (czy też miejscem, w którym znalazłoby się obramowanie, gdyby zostało ono zdefiniowane). Umożliwia określenie odległości pomiędzy tekstem akapitu, nagłówka, komórki tabeli, itp. od innych elementów znajdujących się przed i za tym obiektem, jest przydatne również w połączeniu tekstu z tłem znajdującym się pod nim (szerokość zakreślenia). Dzięki temu element ma miejsce do oddychania, a obramowanie czy krawędź koloru tła nie zderza się bezpośrednio z tekstem. p {padding: 20px} wszystkie odległości będą równe lub p { padding-top: 20px; padding- right: 10px; padding-bottom: 20px; padding-left: 10px;} Tak jak w marigniesach można stosować zapis skrótowy, np.: p {padding: 1em 3em 1em 3em} Obramowanie akapitu Obramowanie to po prostu linia narysowana wokół obszaru zawartości elementu oraz jego (opcjonalnego) dopełnienia. o Typ/styl obramowania: border-style Styl jest najważniejszą z właściwości dotyczących obramowania, ponieważ jeśli nie podano stylu obramowania, obramowanie nie istnieje. zawsze trzeba zadeklarować styl obramowania, bo inaczej wszystkie pozostałe właściwości dotyczące obramowania zostaną zignorowane. p {border-style: solid} całe obramowanie lub p { border-top-style: solid; border-bottom-style: dashed; border-left-style: double; border-right-style: dotted } - stosuje się w celu uzyskania obramowania po jednej stronie elementu 52

53 Można podać cztery wartości dla wszystkich czterech boków lub mniejszą ich liczbę, kiedy wartości prawa i lewa lub górna i dolna są takie same, np.: p{ border-style: solid dashed double dotted;} o Szerokość obramowań: border-width Jeśli nie poda się szerokości obramowania, wykorzystana zostanie domyślna szerokość o wartości medium. Najczęściej spotykanym sposobem określania szerokości obramowania jest podanie wymiaru w pikselach. Można jednak również użyć jednego ze słow. kluczowych (thin cienkie, medium średnie lub thick grube) i pozostawić sposób wyświetlenia przeglądarce. p {border-width: 5px) szerokość całego obramowania lub p {border-top-width: 8px; border-bottom-width: 8px; border-left-width: 5px; border-right-width: 5px} szerokość poszczególnych krawędzi Ponownie można albo odnieść się do każdej ze stron elementu z osobna za pomocą odpowiedniej właściwości, albo wymienić kilka wartości dla poszczególnych boków elementu zgodnie z ruchem wskazówek zegara z użyciem właściwości border-width, np.: p {border-width: thin medium thick 12px} 53

54 o Kolor obramowania: border-color Jeśli pominie się deklarację koloru obramowania, wykorzystany zostanie kolor pierwszego planu elementu (taki sam jak w tekście). p {border-color: red} dotyczy całego obramowania lub p {border-top-color: red; border-bottom-color: red; border-left-color: green; border-right-color: green} dotyczy poszczególnych krawędzi obramowania lub w skrócie p{ border-color: maroon aqua;} p { Możemy oczywiście łączyć wszystkie te znaczniki: border-width: 1px; border-style: solid; border-color: blue;} lub np. p {border-style: solid; border-width: 2px; border-color: blue} <p style="border-top-style: dotted; border-bottom-style: dotted; padding-top: 15px; padding-bottom: 15px"> Lub w skrócie za pomocą właściwości border oraz właściwości określających obramowanie z każdej strony elementu mogą zawierać wartości dotyczące stylu, szerokości oraz koloru w dowolnej kolejności, np.: p {border: 2px dotted red} Nie jest konieczne deklarowanie wszystkich trzech, ale należy pamiętać, że jeśli pominie się wartość dla stylu obramowania, obramowanie to nie zostanie wyświetlone. Właściwość skrótowa border działa nieco inaczej od pozostałych właściwości skrótowych omówionych dotychczas, ponieważ przyjmuje jeden zbiór wartości i zawsze stosuje go do wszystkich czterech boków elementu, np. h1 { border-left: red.5em solid; } /* tylko obramowanie lewe */ h2 { border-bottom: 1px solid; } /* tylko obramowanie dolne */ p { border: 2px dotted #663; } /* wszystkie cztery strony */ 54

55 Zadanie 35. Wykorzystując powyżej przedstawione znaczniki spróbuj zmodyfikować dotychczas stworzoną stronę (przetestuj wszystkie znaczniki) 9. Grafika Wstawianie grafiki do dokumentu Aby wstawić obrazek na stronie w HTML stosujemy znacznik <img/>, który jest skrótem od ang. image (obraz). Dla znacznika img wymagany jest atrybut: src, będący skrótem od source (źródło). Atrybut ten wskazuje lokalizację pliku obrazka za pomocą jego adresu URL. <img src="plik_graficzny"/> Znacznik <img> jest elementem pustym, tzn. nie zawiera wewnątrz żadnych innych elementów, np. tekstu, stąd w jednym znaczniku jest on otwierany i domykany. Umieszcza się go w tekście w miejscu, w którym powinien się pojawić obrazek. W zależności od umiejscowienia pliku na komputerze będziemy stosować odpowiednią ścieżkę dojścia: Np. jeśli nasz obrazek jest zapisany jako logo.gif: <img src="logo.gif" /> - w tym samym folderze <img src="images/logo.gif" /> - w podfolderze (o nazwie images) <img src="../logo.gif" /> - w nadfolderze Plik graficzny najczęściej będzie występował z rozszerzeniem:.gif lub.jpg lub jpeg lub.png, żeby mógł zostać rozpoznany przez przeglądarkę. Jeśli ma się obrazek w innym popularnym formacie, jak TIFF, BMP czy EPS, konieczne będzie wykonanie konwersji do formatu webowego, zanim będzie go można dodać do strony. Wstawiając obrazek warto dodać dodatkowy atrybut alt, który jest tekstem alternatywnym, a więc takim, który poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki lub jeśli użytkownik zdecyduje się wyłączyć w swojej przeglądarce wyświetlanie obrazków. Znacznik wyglądałby wówczas następująco: <img src="plik_graficzny" alt="tekst alternatywny"/> Np. 55

56 Lub <p> Jeśli jesteś <img src= usmiech.gif alt= szczęśliwy />, klaśnij w dłonie.</p> Dobranie odpowiedniego tekstu alternatywnego bywa trudne. Dobrym sposobem jest wyobrażenie sobie, że czytamy stronę znajomemu przez telefon. Problem może pojawić się gdy dojdziemy do obrazka co wówczas można powiedzieć? Jeśli na stronie jest, np. znak ostrzegawczy, to właściwe będzie zastąpienie go tekstem Uwaga, a nie Żółty trójkąt z wykrzyknikiem lub tak jak na powyższym rysunku uśmiechniętą buzię lepiej zastąpić tekstem szczęśliwy niż uśmiechnięta buzia. Dolna krawędź obrazka wstawionego w tekście jest domyślnie wyrównywana z linią bazową tekstu. Wykorzystując kaskadowe arkusze stylów, można przesunąć obrazek do marginesu prawego bądź lewego i pozwolić tekstowi na opłynięcie go, kontrolować odstępy oraz obramowanie wokół obrazka, a także zmieniać jego wyrównanie w pionie. Ponieważ img jest elementem wewnętrznym, nie powoduje łamania wierszy, np. <p> Zawsze chciałam pojechać do Toskanii <img src= tuscany.jpg alt= Zdjęcie Toskanii /> i kiedy już się tam znalazłam, nie zawiodłam się.</p> Jeśli obrazek jest wstawiany pomiędzy tekstem i nie stosujemy żadnych dodatkowych atrybutów, to jest on ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka (formatowanie za pomocą CSS). Jeśli obrazek służy tylko celom dekoracyjnym albo nie dodaje do treści strony niczego znaczącego, można zostawić wartość atrybutu alt pustą. Warto zwrócić uwagę na to, że pomiędzy znakami cudzysłowu nie ma spacji. Np. <img src= esyfloresy.gif alt= /> 56

57 Wielkość obrazka Stosujemy dodatkowe atrybuty: width="x" height="y" <img src="plik_graficzny" alt="tekst alternatywny" width="x" height="y" /> Gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość (szerokość) i wysokość obrazka w pikselach. lub w css: img { width:x; height:y} Kiedy przeglądarka zna wymiary obrazka znajdującego się na stronie internetowej, może sama stworzyć układ graficzny strony w czasie, gdy obrazki dopiero są pobierane. Bez wartości width oraz height układ strony tworzony jest natychmiast, a później tworzony na nowo za każdym razem, gdy kolejny plik pobierany jest z serwera. Poinformowanie przeglądarki o tym, ile miejsca ma zostawić dla każdego obrazka, może dla niektórych użytkowników przyspieszyć wyświetlenie ostatecznej wersji strony nawet o kilka sekund. W celu przyspieszenia wyświetlania obrazków na stronie należy również zwrócić uwagę na ich rozmiar. Zdarza się, że mimo iż obrazek na stronie może wydawać się niewielki, nadal trzeba będzie pobrać jego dużą wersję o odpowiednio dużym rozmiarze pliku. Nie powinno się zmuszać użytkownika do pobierania dużych plików, kiedy na stronie chce on zobaczyć tylko niewielki obrazek. Choć zmiana wymiarów obrazka w ten sposób może wydawać się kusząca, powinno się unikać korzystania z tej techniki. O wiele lepiej poświęcić odrobinę czasu na samodzielną zmianę rozmiaru obrazka w programie służącym do edycji grafiki, a następnie umieścić obrazek w jego rzeczywistym rozmiarze na stronie internetowej. Z drugiej strony kiedy zdarzy nam się, że obrazki na naszej stronie internetowej wyglądają na niewyraźne, należy zacząć od sprawdzenia, czy wartości atrybutów width oraz height odpowiadają rzeczywistym rozmiarom obrazka, ponieważ może okazać się, że rzeczywisty rozmiar jest mniejszy, przez co stają się niewyraźne. 57

58 Przydatne: Oryginalne wymiary obrazka (jeśli ich nie znamy) można oczywiście sprawdzić, otwierając go w programie do edycji grafiki, ale da się również wykorzystać do tego przeglądarkę. Za pomocą przeglądarek Firefox, Opera, Netscape lub Safari (ale nie Internet Explorer dla Windows) należy otworzyć plik obrazka, a jego wymiary w pikselach wyświetlone zostaną w pasku tytułu okna przeglądarki obok nazwy pliku. Np. Obramowanie obrazka: Stosujemy atrybut style z cechą border i wartością uzależnioną od sposobu dodania obramowania (patrz style css) <img src="plik_graficzny" alt="tekst alternatywny" style="border: solid /> lub w css: img { border: solid} Odstępy pomiędzy obrazkiem a tekstem Stosujemy atrybut style z cechą margin (lub konkretniej: margin-left, margin-top, itd.) i wartością uzależnioną od odległości, którą chcemy ustawić (podana w pikselach patrz style css) <img src="plik_graficzny" alt="tekst alternatywny" style="margin-left: 50px; margin-right: 50px; " /> lub w css: img{ margin-left: 50px; margin-right: 50px } 58

59 Pozycja grafiki Jeśli chcemy zastosować pozycjonowanie grafiki przy prawym lub lewym marginesie strony (lub nadrzędnego bloku), tak aby treść akapitu oblewała ilustrację używamy atrybutu style, z cechą float, która zmienia wyrównanie obrazka w pionie oraz poziomie, jest także wykorzystywana do przesunięcia obrazka do marginesu prawego lub lewego (z wartością left lub right) i pozwolenia na zawijanie tekstu wokół niego. <img src="plik_graficzny" alt="tekst alternatywny" style="float: left"/> lub w css: img{ float:left} Wartości center nie stosujemy, ponieważ dotyczy ona elementów liniowych, np. tekstu, a rysunek jest elementem blokowym. Dodatkowe informacje o obrazku: Np.: Możemy dodać opis do ilustracji, należy wówczas użyć atrybutu title. Przeglądarki najczęściej wyświetlają jego zawartość jako dymek (tooltip) po najechaniu myszą nad obrazek. <img src="fotka.jpg" alt="nasza banda" title="zdzichu to ten po lewej"/> Obrazek w tle Stosujemy właściwość background-image do danego elementu i określamy położenie obrazka (najczęściej stosujemy w stylach css) body { background-image: url("plik_graficzny")} Poniższe przykłady prezentują zastosowanie obrazków tła z tyłu całej strony (elementu body) oraz pojedynczego elementu blockquote, kiedy określono również wartość dopełnienia oraz obramowania. 59

60 body { background-image: url(star.gif);} blockquote { background-image: url(dot.gif); padding: 2em; border: 4px dashed;} Obrazek rozpoczyna się w lewym górnym rogu i jest powielany w poziomie oraz pionie, dopóki cały element nie zostanie wypełniony. Jeśli zdefiniuje się zarówno właściwość background-color, jak i background-image dla elementu, obrazek zostanie wyświetlony nad kolorem. Tak naprawdę zaleca się podawanie podobnego zastępczego koloru tła na wypadek, gdyby obrazek nie został pobrany. Powielanie tła - powtarzanie obrazka Jak widzieliśmy na ostatnim rysunku, kiedy kwestię tę pozostawi się przeglądarce, obrazki powielane są w gorę i w dół oraz w prawo i w lewo. To zachowanie można zmienić za pomocą właściwości: background-repeat oraz w zależności od tego co chcemy osiągnąć następujące wartości: o repeat - grafika jest nadal powtarzana, aby wypełniła całą powierzchnię tła (to jest domyślne zachowanie, jeśli nie dodamy atrybutu background-repeat) o repeat-x - grafika jest powtarzana tylko w poziomie, zgodnie z osią x (wypełnia całą szerokość, ale nie wysokość) o repeat-y - grafika jest powtarzana tylko w pionie, zgodnie z osią y (wypełnia całą wysokość, ale nie szerokość) o no-repeat - grafika jest wstawiana tylko w jednym miejscu. 60

61 W przypadku naszej strony:. body { background-image: url("plik_graficzny"); background-repeat: repeat-y } 61

62 Pozycja tła W celu szczegółowego ustawienia grafiki stosujemy właściwość: background-position. Właściwość background-position określa pozycję obrazka źródłowego (ang. origin image) w tle. Obrazek źródłowy można sobie wyobrazić jako pierwszy obrazek umieszczany w tle, który później jest powielany. W zależności od tego co chcemy uzyskać stosujemy dla niego właściwe wartości: o Wartości słów kluczowych left (lewo), center (środek), right (prawo), top (gora) oraz bottom (dół) Pozycjonują obrazek źródłowy względem krawędzi dopełnienia elementu. Przykładowo left pozycjonuje obrazek przy lewej krawędzi obszaru tła elementu. Jeśli poda się tylko jedno słowo kluczowe, przeglądarka zakłada, że brakującym słowem jest center. Z tego powodu deklaracja backgroundposition: right ma ten sam efekt co drugi z przykładów z kolorowego rysunku. o Miara długości w px (pikselach) Pozycję można również ustalić, określając odległość obrazka źródłowego od lewego górnego rogu elementu za pomocą miary w pikselach. Kiedy pozycja określona jest w jednostkach długości, wartość w poziomie zawsze podawana jest jako pierwsza. o Wartość procentowa % - Wartości procentowe podawane są w parach pozioma-pionowa, gdzie o 0% 0% odpowiada lewemu górnemu rogowi, o 100% 100% prawemu dolnemu. Warto zauważyć, że wartość procentowa ma zastosowanie zarówno do obszaru tła, jak i samego obrazka. Wartość 100% umieszcza na przykład prawy dolny róg obrazka w prawym dolnym rogu tła. Jak w przypadku wartości kluczowych, jeśli poda się tylko jedną wartość procentową, przeglądarka zakłada, że drugą wartością jest 50% (odpowiednik center). 62

63 Przykłady: o 0 0; - Lewy górny róg. To są wartości domyślne. o 100% 100%; - Prawy dolny róg. o 100px 255px; - Grafika odsunięta o 100 pikseli od lewej i o 255 pikseli od góry. o 50% 0; - Grafika umieszczona na górze i wyśrodkowana w poziomie.. Np. body { background-image: url("plik_graficzny"); background-repeat: repeat-y; background-position:right } 63

64 Np. body { Przytwierdzanie tła Do przesuwania grafiki stosujemy właściwość: background-attachment z odpowiednia cechą: o fixed - Tło pozostanie nieruchome względem okna przeglądarki, o scroll - Tło przesuwa się razem ze stroną (to jest domyślne zachowanie nawet jeżeli nie dodamy atrybutu: background-attachment) background-image: url(images/bigstar.gif); background-repeat: no-repeat; background-position: center 300px; background-attachment: fixed; } ustawienie dotyczy trzeciego z poniższych obrazków Skrótowa właściwość background Poręczną właściwość background można wykorzystać do podania wszystkich stylów związanych z tłem w jednej deklaracji. {background: background-color background-image background-repeat background-attachment background-position} Na przykład poniższa reguła dotycząca tła: body { background: black url(arlo.gif) no-repeat right top fixed; } zastępuje taką regułę zawierającą pięć deklaracji: body { background-color: black; background-image: url(arlo.jpg); background-repeat: no-repeat; background-position: right top; background-attachment: fixed;} 64

65 Wszystkie wartości właściwości dla background są opcjonalne i mogą się pojawić w dowolnej kolejności. Jedynym ograniczeniem jest to, że kiedy podaje się współrzędne właściwości background-position, najpierw musi zostać podana wartość pozioma, a natychmiast po niej pionowa. Obrazek jako link Jeżeli chcemy aby obrazek stał się linkiem odsyłającym nas do innej strony wstawiamy znany już znacznik <a href > obrazek </a> <a href="nazwa_pliku" title="dymek-po_najechaniu_na link"> <img src="plik_graficzny" alt="tekst alternatywny" /> </a> nazwa_pliku to adres pliku, do którego zamierzamy się przenieść po kliknięciu na obrazek plik_graficzny to adres obrazka, uzależniony od miejsca jego zapisu na dysku Obrazek, który jest linkiem będzie miał niebieską obwódkę (tak jak tekst będący linkiem jest automatycznie podkreślony). Oczywiście można to wyłączyć korzystając z odpowiedniej komendy w CSS. Zadanie 36. Wstaw obrazek na stronę, odpowiednio go sformatuj (ustaw wielkość, oblej tekstem, ustaw pozycję), wstaw teksturę jako tło (ustaw pozycjonowanie, powtarzanie obrazka, przesuwanie grafiki). Linki cd. Każdy z pewnością zauważył, że często odnośnik ma jeden kolor, kiedy się go kliknie, a inny, kiedy powraca się na daną stronę. Dzieje się tak, ponieważ w tle przeglądarka śledzi, które odnośniki zostały już kliknięte (lub odwiedzone, jak się najczęściej mówi). Przeglądarka śledzi również inne statusy odnośników, na przykład to, czy kursor użytkownika znajduje się nad odnośnikiem lub czy właśnie odbywa się kliknięcie go. W CSS można stosować style do odnośników w każdym z tych stanów za pomocą specjalnego rodzaju selektora zwanego selektorem pseudoklasy (ang. pseudoclass selector). Istnieją cztery główne pseudoklasy, które mogą być wykorzystywane jako selektory: a:link - Dodaje styl do odnośników nieodwiedzonych (nieklikniętych), co umożliwia odróżnienie linku od zwykłego tekstu na stronie. a:visited - Dodaje styl do odnośników, które zostały już kliknięte, co umożliwia odróżnienie linku już klikniętego od nie klikniętego. a:hover - Dodaje styl do odnośnika, kiedy znajduje się nad nim wskaźnik myszy, co umożliwia odróżnienie linku, na który najeżdżamy myszką od pozostałych. a:active - Dodaje styl do odnośnika, kiedy wciskany jest na nim przycisk myszy, co umożliwia odróżnienie linku, który w danym momencie klikamy od pozostałych. Cechy te umieszczamy zwykle w stylach css 65

66 np. a:link {color: blue} a:visited {color: green} a:hover {color: maroon} a:active {color: red} Selektory pseudoklas oznaczane są przez znak dwukropka (:). Pseudoklasy :link, :visited oraz :active (w XHTML) zastępują stare atrybuty prezentacyjne link, vlink oraz alink, które kiedyś (w HTML) wykorzystywane były do zmiany kolorów odnośników. Dzięki CSS można już zmienić nie tylko kolor po wybraniu określonego stanu odnośnika można zastosować do niego dowolną właściwość omówioną dotychczas. Możemy np. usunąć podkreślenie lub dodać tło: a:link { color: maroon; text-decoration: none;} a:visited { color: grey; text-decoration: none;} a:hover { color: maroon; text-decoration: underline; background-color: #C4CEF8;} a:active { color: red; text-decoration: underline; background-color: #C4CEF8;} Jeśli chcemy użyć wszystkich czterech pseudoklas dla odnośników w jednym arkuszu stylów, muszą one pojawić się w określonej kolejności, by działały poprawnie. Zadanie 37. W zadaniu z linkami ustaw w stylach css zróżnicowanie kolorami wykorzystania linków. Formatowanie tekstu c.d. Pseudoklasy nie są jedynymi pseudoselektorami. Istnieją rownież cztery pseudoelementy (ang. pseudoelement), ktore działają tak, jakby wstawiały fikcyjne elementy do struktury dokumentu w celu uzyskania stylizacji. Pseudoelementy oznaczane są także za pomocą znaku dwukropka (:). Pierwsza litera :first-letter Stosuje regułę stylu do pierwszej litery określonego elementu. Właściwościami, jakie można w tym przypadku zastosować, są: o color o float o font o background o text-decoration o border o tekst-align o letter-spacing o margin o word-spacing o padding 66

67 Pierwszy wiersz :first-line Ten selektor stosuje regułę stylu do pierwszego wiersza określonego elementu. Właściwościami, jakie można w tym przypadku zastosować, są: o color o font o text-decoration o tekst-align o line-height o background o word-spacing o letter-spacing Zadanie 37. Wypróbuj znaczniki formatujące pierwsze zdanie i pierwszą literę w takście. 10. Tabele Ramy tabeli tworzone są za pomocą znacznika: <table> </table> Wiersze tabeli wprowadzamy za pomocą znacznika <tr> (table row - wiersz tabeli): <tr> </tr> Nagłówki tabeli wprowadzamy za pomocą znacznika <th> (table header nagłówek tabeli) <th> </th> Komórki tabeli wprowadzamy za pomocą znacznika <td> (table data - dane tabeli): <td> </td> 67

68 Należy pamiętać, że cała zawartość tabeli musi się znaleźć w Komorkach, czyli w elementach td oraz th. W komórce można umieścić dowolne dane tekst, grafikę, a nawet inne tabele. Schemat tabeli wygląda następująco: <table> <tr> <th> Pierwszy rząd, pierwsza kolumna </th> <th> Pierwszy rząd, druga kolumna </th> <th> Pierwszy rząd, trzecia kolumna </th> </tr> <tr> <td> Drugi rząd, pierwsza kolumna </td> <td> Drugi rząd, druga kolumna </td> <td> Drugi rząd, trzecia kolumna </td> </tr> <tr> <td> Trzeci rząd, pierwsza kolumna </td> <td> Trzeci rząd, druga kolumna </td> <td> Trzeci rząd, trzecia kolumna </td> </tr> </table> Komórki nagłówkowe th mogą występować również w pionie, wówczas będą stanowiły pierwszą komórkę w każdym wierszu, a pozostałe komórki w danych wierszach będą tworzone przez znaczniki komórek danych td. 68

69 Kod w dokumencie źródłowym przedstawiający dane niezbędne do utworzenia powyższej tabeli przedstawionej na rysunku powinien wyglądać tak: <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> <th>składnik menu</th> <th>kalorie</th> <th>tłuszcz (g)</th> <td>rosoł z makaronem</td> <td>120</td> <td>2</td> <td>sałatka cesarska</td> <td>400</td> <td>26</td> Tekst oznaczony jako nagłówki (elementy th) wyświetlany jest nieco inaczej od tekstu z pozostałych komórek tabeli (elementów td). Różnica nie jest jednak czysto kosmetyczna. Nagłówki tabeli są istotne, ponieważ udostępniają informacje lub kontekst dotyczące komórek w każdym wierszu lub kolumnie, jakie poprzedzają. Element th może w alternatywnych narzędziach do przeglądania Internetu być obsługiwany w inny sposób niż elementy td. Czytniki ekranu mogą na przykład głośno odczytywać nagłówek przed każdą komórką danych ( Składnik menu, Sałatka cesarska, Kalorie, 400, Tłuszcz-g, 26 ). Nie można więc rezygnować z wykorzystywania elementów th tylko ze względu na to, że są one domyślnie wyświetlane jako pogrubione oraz wyśrodkowane. Nagłówki należy oznaczać semantycznie i zmieniać ich warstwę prezentacyjną później za pomocą arkuszy stylów. Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <table border> </table> Możemy sami zdecydować jak ma wyglądać obramowanie, na przykład: gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę; oprócz tego możemy określić styl obramowania, np. <table style= border-style:solid; border-width:10px > </table> Możemy również nadać styl obramowania dla poszczególnych komórek (są to pewnego rodzaju obramowania wewnętrzne komórek), np.: <td style= border-style:solid; border-width:10px > </td> 69

70 lub w stylach css (aby uniknąć wpisywania formatowania dla wielu komórek): table { border-style:solid; border-width:10px } td { border-style:solid; border-width:10px} Wysokość i szerokość tabeli Jeżeli chcemy ustawić konkretną wielkość tabeli, lub komórek stosujemy odpowiednie właściwości i cechy: <table style="width: 100%; height: 50px"> - wielkość całej tabeli o Szerokość kolumny ustawiamy podając wielkość komórek w pierwszym rzędzie - Wystarczy podać szerokość komórek w pierwszym wierszu, aby pozostałe, w kolejnych wierszach, przyjęły te same wartości (wysokość podana w pierwszym rzędzie się nie przenosi i dla kolejnych wierszy należy ustawiać ją osobno) <table> <tr> <td style="width: 20%; height: 50px >komórka 1</td> <td style="width: 50%; height: 50px >komórka 2</td> <td style="width: 30%; height: 50px">komórka 3</td> </tr> </table> lub w stylach css (aby uniknąć wpisywania formatowania dla wielu komórek): table { width: 100%; height: 50px } Odstęp między zawartością komórki a jej obramowaniem (mierzony w pikselach) jest zbyt mały, możemy użyć atrybutu cellpadding (margines wewnętrzny w komórce tabeli, czyli dopełnienie komórek). Dopełnienie komórek to wielkość odstępu pomiędzy zawartością komórki a jej obramowaniem. Jeśli nie poda się wartości dopełnienia, komórki będą miały domyślne, jednopikselowe dopełnienie. <table cellpadding= 15 > <tr> <td>komorka 1</td> <td>komorka 2</td> </tr> <tr> <td>komorka 3</td> <td>komorka 4</td> </tr> </table> 70

71 o Ponieważ atrybutu cellpadding można używać jedynie w połączeniu z elementem table, wartość cellpadding ma zastosowanie do wszystkich komórek tabeli. Innymi słowy, za pomocą tego atrybutu nie można podać rożnych wartości dopełnienia dla pojedynczych komórek. o Można jednak określić wartość dopełnienia dla każdej komórki z osobna za pomocą właściwości padding z kaskadowych arkuszy stylów, np. td { border-style:solid; border-width:10px; padding:15px} odstęp między komórkami to przestrzeń pomiędzy sąsiadującymi ze sobą komórkami tabeli, podawana jako liczba pikseli. Jeśli nie poda się żadnej wartości, przeglądarka zastosuje domyślną wartość dwupikselowego odstępu pomiędzy poszczególnymi komórkami. Stosuje się tu atrybut cellspacing. Również jest on stosowany dla określenia odstępów pomiędzy komórkami całej tabeli, więc stosuje się go z elementem table. <table cellpadding= 15 cellspacing= 15 > <tr> <td>komorka 1</td> <td>komorka 2</td> </tr> <tr> <td>komorka 3</td> <td>komorka 4</td> </tr> </table> o W CSS wartość dopełnienia pomiędzy sąsiadującymi komórkami możemy podać za pomocą właściwości border-collapse, która pozwala wybrać, której z metod wyświetlania obramowania chcemy użyć. Do wyboru mamy wartości separate oraz collapse. 71

72 o Model rozdzielonego obramowania gdy wybierzemy wartość separate - Domyślnie tabele wyświetlane są z rozdzielonym obramowaniem, jak widać na górnym przykładzie z rysunku. Ilość odstępu, jaka ma pojawić się pomiędzy komórkami, podaje się za pomocą właściwości border-spacing. o Wartością właściwości border-spacing są dwie miary długości. Wartość w poziomie pojawia się jako pierwsza i ma zastosowanie do kolumn tabeli. Druga wartość ma zastosowanie do odstępu między wierszami. Jeśli poda się tylko jedną wartość, zostanie ona użyta zarówno w poziomie, jak i w pionie. table { border-collapse: separate; border-spacing: 15px 3px; border: none; /* brak obramowania wokół samej tabeli */ } td { border: 2px solid purple; /* obramowanie wokół komórek tabeli */ } o Model złożonego obramowania gdy wybierzemy wartość collapse - Kiedy wybrany zostaje model ze złożonym obramowaniem, pomiędzy komórkami pojawi się tylko jedno obramowanie. Poniżej znajduje się fragment arkusza stylów zastosowanego w celu utworzenia dolnego przykładu table { border-collapse: collapse; border: none; /* brak obramowania wokół samej tabeli */ } td { border: 2px solid purple; /* obramowanie wokół komórek tabeli */ } Scalanie komórek (inaczej rozciąganie komórek) Nazwa rozciąganie komórek pochodzi od ang. Cell spanning), czyli rozszerzanie komórki tak, by obejmowała ona kilka wierszy lub kolumn. Rozciąganie komórek pozwala na tworzenie rozbudowanych struktur tabeli, ale ma również efekt uboczny w postaci większego stopnia skomplikowania kodu tabeli. Komórkę danych lub nagłówek rozciąga się, dodając do nich odpowiednio atrybuty colspan lub rowspan. Scalona komórka to taka, która szerokością lub wysokością dorównuje kilku komórkom w standardowych wymiarach w tym przypadku scalenie to raczej rozciągnięcie komórki do szerokości lub wysokości kilku innych komórek: o colspan jest skrótem od "column span" (rozciągnięcie kolumny) - jest używany w znaczniku <th> lub <td> do określania na ile kolumn ma się rozciągnąć komórka. Np. <td colspan="3"> 72

73 o rowspan stosujemy analogicznie do wierszy (rozciągnięcie wiersza) na ile wierszy ma się rozciągnąć komórka, np. <td rowspan="2"> Dodatkowe przykłady z resztą kodu źródłowego tabeli: <table> <tr> <th colspan= 2 >Tłuszcz</th> </tr> <tr> <td>tłuszcze nasycone (g)</td> <td>tłuszcze nienasycone (g)</td> </tr> </table> <table> <tr> <th rowspan= 3 >Podawane porcje</th> <td>mała (220 g)</td> </tr> <tr> <td>średnia (450 g)</td> </tr> <tr> <td>duża (700 g)</td> </tr> </table> Wyświetlanie pustych komórek W przypadku tabel z rozdzielonym obramowaniem za pomocą właściwości emptycells można zdecydować, czy chcemy, by w pustych komórkach wyświetlane było obramowanie oraz tło. Żeby komórka mogła zostać uznana za pustą, nie może ona zawierać żadnego tekstu, obrazków ani twardej spacji (niełamiącej wiersza). Do cechy emptycells możemy stosować wartość: show (pokaż) lub hide (ukryj), np. td { emptycells: hide} Na rysunku poniżej puste są komórki numer czternaście oraz piętnaście i są one ustawione na hide. 73

74 Wyrównanie tabeli (uzyskujemy oblanie tabeli tekstem z jednej ze stron) Stosujemy analogicznie atrybut float, jak dla ustawienia obrazka (tylko wpisujemy jako atrybut znacznika <table>): <table style="float:right; "> </table> Wyrównanie danych w komórkach Stosujemy atrybut text-align (tak jak w przypadku wyrównania tekstu na stronie) <td style="text-align: left; "> </td> <td style="text-align: center; "> </td> <td style="text-align: right; "> </td> lub w stylach css: td{ border-style:solid; border-width:10px; text-align: right} Tło tabeli Np. Kolor tło może mieć jednolity kolor (tak jak w przypadku body) o Możemy ustawić tło dla całej tabeli: <table style="background-color: red"> lub w css: table{ background-color: red} Np. o Lub dla poszczególnej komórki: <td style="background-color: green"> lub w css: table{ background-color: green } Obrazek jako tło możemy ustawić również obrazek (np. z jakąś teksturą) wstawiamy adres url obrazka w analogiczny sposób jak w przypadku tła na stronie tylko dla znacznika <table>, a nie <body>) <table style="background-image: url(adres_obrazka)"> lub w css: table{ background-image: url(adres_obrazka } 74

75 Tytuł tabeli Tytuł wstawiamy z użyciem znacznika <caption> (od ang. caption podpis) wykorzystywany jest do nadania tabeli tytułu lub krótkiego opisu. Musi być pierwszym elementem wewnątrz elementu table, tzn. musi być umieszczony zaraz po otwierającym znaczniku <table> i w jednej tabeli może znajdować się tylko jeden element <caption>. <table> <caption>tytuł tabeli</caption> </table> Np. o Za pomocą stylów CSS możesz zdefiniować położenie tytułu nad (top) tabelą lub pod (bottom) tabelą: <caption style="caption-side: top; ">Tytuł tabeli</caption> lub w stylach css: caption{ caption-side:bottom} Nagłówek wiersza i kolumny jeszcze raz z przykładem dla naszej strony: Nagłówek jest definiowany za pomocą znaczników: <th> </th> Przykładowa tabela ma więc kod: W html: <table> <caption> Lista produktów </caption> <tr> <th> Nr </th> <th> Nazwa </th> <th> Cena </th> <th> Dostępność </th> </tr> <tr style="text-align:center"> <td> CH384711</td> <td> Naturalne pestycydy firmy Maxiplon </td> <td> 14,99</td> <td> Tak </td> </tr> </table> W css: table { border-style:solid} table td{ border-style:dashed; text-align:left; padding:20px} table th{ border-style:dashed; text-align:center; padding:20px} caption { caption-side: bottom} 75

76 Analogicznie należy wprowadzać kody nagłówków wierszy. Każdy wiersz należy rozpocząć od komórki z nagłówkiem <th>. <table> <caption>tytuł tabeli</caption> <tr> <td></td> - pierwsza komórka pusta <th> 1 nagłówek w wierszu </th> <th> 2 nagłówek w wierszu </th> <th> 3 nagłówek w wierszu </th> </tr> <tr> <th>1 nagłówek w kolumnie </th> <td> komórka 1.1</td> <td> komórka 1.2</td> <td> komórka 1.3</td> </tr> <tr> <th> 2 nagłówek w kolumnie </th> <td> komórka 2.1 </td> <td> komórka 2.2 </td> <td> komórka 2.3 </td> </tr> </table> 76

77 Zadanie 38. Stwórz na nowej stronie w kreatorze (Notepad ++) tabelę zawierającą informacje dotyczące produktów oferowanych w Centrum Ogrodniczym. Zastosuj poznane metody formatowania tabel (wielkość tabeli, obramowania, tworzenie nagłówków, wyrównanie komórek, scalanie komórek jeśli potrzeba) Uwaga: Podziału strony nie dokonujemy za pomocą tabeli, ale stosujemy elementy blokowe, tzw. Selektory klas, które właściwie konfigurujemy poprzez style css W czasach przed pojawieniem się arkuszy stylów tabele były jedynym sposobem tworzenia wielokolumnowego układu strony lub kontrolowania wyrównania oraz białych znaków. Układ strony oparty na tabelach, szczególnie na skomplikowanym systemie zagnieżdżonych tabel, który niegdyś był standardem w świecie projektowania stron internetowych, nie jest już niezbędny i jest mocno odradzany. Do selektorów klas zaliczamy atrybuty: class (dotyczy grupy elementów) oraz id (dotyczy poszczególnego elementu) Zapisujemy: W html: <div id= nazwa_id > </div> W css: #nazwa_id{ } W html: <div class= nazwa_klasy > </div> W css:.nazwa_klasy{ } 77

78 Selektory identyfikatorów (ang. ID selectors) pozwalają na wybieranie elementów zgodnie z wartościami ich identyfikatorów (id). Symbolem wykorzystywanym w tym kontekście jest znak #. Elementy należące do tej samej klasy można wybierać za pomocą selektorów klas (ang. class selector). Nazwy klas oznaczane są przez wykorzystanie znaku kropki (.). Żeby na przykład wybrać wszystkie akapity z atrybutem class= special, należy wykorzystać poniższy selektor (kropka wskazuje na to, że następujące po niej słowo jest selektorem klasy): p.special { color: orange; } Żeby zastosować właściwość do wszystkich elementów tej samej klasy, należy pominąć w selektorze nazwę elementu (trzeba pamiętać o pozostawieniu kropki, bo jest ona znakiem określającym selektor klasy). Poniższa reguła odnosi się do wszystkich akapitów oraz dowolnych innych elementów oznaczonych atrybutem class= special..special { color: orange; } Przykłady dla naszej strony: W html: <div id= nagłówek > Centrum Ogrodnicze Rajski ogród <div> W css: #nagłówek{ color:black; font-size:40px; padding: 10px; margin: 5px; background: olive; font-weight: bold; text-decoration: underline; border: 5px solid #454545} W html: <body> <div class= sekcja_nagłówkowa > </div> <div class= całość > <div class= left > </div> <div class= right > </div> </div> </body> W css:.sekcja_nagłówkowa { }.całość{ }.left{ }.right{ } 78

79 Zadanie 39. W zadaniu, z tabelą postaraj się stworzyć pełny układ strony z podziałem na sekcję nagłówkową, menu i właściwy tekst stosując elementy blokowe (w przypadku trudności patrz: uproszczony przykład poniżej). Cała strona (przykład): Kod źródłowy: W html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="title" content="centrum Ogrodnicze Rajski Ogród "> <meta name="description" content="handel hurtowy i detaliczny roślinami ozdobnymi, owocowymi, drzewami, akcesoriami i narzędziami ogrodniczymi."> <meta name="keywords" content="szkodniki, chwasty, grzyby, rośliny, kwiaty, warzywa"> <meta name="author" content="monika Kocek"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> 79

80 <body> <div class="sekcja_nagłówkowa"> <a href="zad 37c.html" title="strona główna"> <img src="2.jpg" alt="kwiatek" width="200" height="100" style="float:left"> </a> <div id="nagłówek"> Centrum Ogrodnicze - Rajski Ogród </div> <p> Witamy w firmie <b> Rajski Ogród! </b> Mamy nadzieję, że w naszej witrynie znajdziesz materiały, dzięki którym staniesz się lepszym ogrodnikiem. </p> <hr style="color:green"/> </div> <div class="całość"> <div class="left"> <a href="index.html"><img src="prz_główna.gif" /></a> <a href="porady.html"><img src="prz_porady.gif" /></a> <a href="problemy.html"><img src="prz_problemy.gif" /></a> <a href="produkty.html"><img src="prz_produkty.gif" /></a> <a href="sklep.html"><img src="prz_sklep.gif" /></a> <a href="kontakt.html"><img src="prz_kontakt.gif" /></a> </div> <div class="right"> <h1>produkty</h1> <table> <caption> Lista produktów </caption> <tr> <th> Nr </th> <th> Nazwa </th> <th> Cena </th> <th> Dostępność </th> </tr> <tr style="text-align:center"> <td> CH384711</td> <td> Naturalne pestycydy firmy Maxiplon </td> <td> 14,99</td> <td> Tak </td> </tr> <tr> <td>ch548291</td> <td>naturalne herbicydy firmy Maxiplon</td> <td>14,99</td> <td>tak</td> </tr> <tr> <td>ch543295</td> <td>pałeczki nawozowe firmy Polflora</td> <td>5,98</td> <td>tak</td> </tr> <tr> <td>ch548570</td> <td>tulipany, duża paczka cebulek firmy Florax</td> <td>22,50</td> <td>nie</td> </tr> <tr> <td>ch548571</td> <td>narcyzy, duża paczka cebulek firmy Florax</td> <td>22,50</td> <td>tak</td> </tr> 80

81 <tr> <td>ch548572</td> <td>hiacynty, duża paczka cebulek firmy Florax</td> <td>22,50</td> <td>tak</td> </tr> <tr> <td>ch548573</td> <td>krokusy, duża paczka cebulek firmy Florax</td> <td>22,50</td> <td>nie</td> </tr> <tr> <td>ch545392</td> <td>krzaki róży pnącej ze szkółki Pergola</td> <td>12,99</td> <td>tak</td> </tr> <tr> <td>ch548577</td> <td>zestaw do produkcji kostki brukowej firmy Polbruk</td> <td>32,99</td> <td>tak</td> </tr> </table> <h3 style= text-decoration: blink > Uwaga! </h3> <p> Artykuły oznaczone jako dostępne można kupić na miejscu lub zamówić ich dostawę. Zapraszamy do naszego sklepu na specjalne promocje wybranych produktów. </p> <hr style="color:green"/> <p> Copyright 2006 Rajskie Ogrody <br/> Wykorzystywanie jakichkolwiek materiałów firmy bez pisemnej zgody jest zabronione. <br/> <a href=" Skontaktuj sie z administratorem strony </a> </p></p> </div> </div> </body> </html> W css: body{ background-color:beige;} hr{ color:green; background-color:green; height:3; width:90%;} p{ color:green;} h1{ color:black;} h3{ color:red;} img{ width:200; height:100;}.sekcja_nagłówkowa{ margin:0 auto; text-align: center; width: 1140px;} 81

82 .całość{.left{.right{ margin:0 auto; text-align: center; width: 1140px} text-align: center; width: 200px; height:800px; float:left; background-image: url("tło1.jpg"); background-repeat:repeat-y; background-position:right; line-height:50px} text-align: justify; padding: 20px; height:760px; float: right; width: 900px; background: #C5DB95} table { border-style:solid;} table td{ border-style:dashed; text-align:left; padding:10px} table th{ border-style:dashed; text-align:center; padding:10px} caption { caption-side: bottom} #nagłówek{ color:black; font-size:40px; padding: 10px; margin: 5px; background: olive; font-weight: bold; text-decoration: underline; border: 5px solid #454545} 82

83 Dla chętnych 11. Formularze Ramy formularza Formularze umożliwiają wykonanie czynności, takich jak np. wysłanie wiadomość do właściciela witryny, zarejestrowanie się na stronie, zalogowanie się do prywatnej części serwisu, czy zakup w sklepie internetowym. Np. Formularze dodawane są do stron internetowych za pomocą elementu form (w języku angielskim form to formularz). Element form jest pojemnikiem dla wszystkich elementów składowych formularza, w tym pewnej liczby jego kontrolek, na przykład pól tekstowych oraz przycisków. Może również zawierać elementy blokowe (na przykład h1, p czy listy), jednak nie może zawierać innego elementu form. Elementy formularza są tworzone w pewnych ogólnych ramach, między nimi umieszczamy wszystkie pozostałe elementy. Ramy te tworzymy za pomocą polecenia: <form> </form> Aby odbiorca strony mógł przesłać do autora jakieś informacje za pomocą formularza musimy zdefiniować gdzie te dane mają być wysłane. W tym celu stosujemy atrybut action. Jego wartością może być dowolny adres URL (lub adres poczty mailowej). 83

84 <form action= mailto:twój_adres_ > </form> Np. <form action= > Oprócz określenia miejsca gdzie dane powinny zostać przekazane, musimy wskazać sposób dostarczenia tych wiadomości. Stosujemy tu atrybut method. Możliwe są dwie wartości: get - przesyłane dane są widoczne dla użytkownika, a rezultat działania formularza może być zapamiętany w zakładkach, przesyłane dane przesłane są w postaci zmiennych, widocznych w adresie URL lub post - dane są przesyłane w nagłówku wiadomości i nie są widoczne na ekranie, dlatego ta metoda jest bezpieczniejsza (dane zostaną przesłane jako treść zapytania http), metoda ta nie posiada ograniczenia wielkości przesyłanych danych, gdy chcemy wysłać dane z formularza na swój adres zawsze używamy metody post (get nie zadziała na a nic nie dotrze) <form action= mailto:twój_adres_ method= post > </form> np. <form action= mailto:3rok.informatyka@gamil.com method= post > Jeśli zamieszczamy na stronie kilka formularzy z ankietami, każdej z nich możemy nadać inny temat, co ułatwi np. organizację odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka (wstawiona informacja zawarta będzie w temacie listu). Stosujemy tu atrybut subject wstawiany po znaku zapytania: <form action= mailto:twój_adres_ ?temat_formularza > </form> Np. <form action= mailto:3rok.informatyka@gamil.com?rejestracja method= post > Ostatnim ważnym parametrem jest enctype="text/plain", który stosujemy, aby przysyłany tekst był w pełni czytelny i aby nie pojawiały się w nim przeformatowane krzaczki Np. Tekst bez atrybutu encype: Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40& Tekst przesłany po umieszczeniu w formularzy atrybutu encype: Imię i nazwisko=jan Kowalski Płeć=mężczyzna Wiek=31-40 Stąd pełen znacznik wyznaczający ramy formularzy powinien wyglądać następująco: <form action= mailto:twój_adres_ ?temat_formularza method= post enctype="text/plain"> </form> 84

85 Np. <form action= method= post enctype="text/plain"> </form> Grupy pól 1. Pole tekstowe ma ono wysokość jednej linii tekstu i określoną długość, można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie. <form action="..."> <input type="text" name="nazwa" /> </form> Type to typ pola, w tym wypadku tekstowego (="text"). Name to nazwa pola, w naszym przykładzie "imię". Dodatkowo, aby na stronie wyświetlanej w przeglądarce obok pola do uzupełnienia pojawił się komunikat (pytanie w ankiecie, na które w danym polu należy umieścić odpowiedź), zwany etykietą, stosujemy znacznik <label>. Znacznik <label> powinno się dodawać dla wszystkich pól formularza (z wyjątkiem przycisków i pól ukrytych). Można to zrobić na dwa sposoby: poprzez umieszczenie pola tekstowego, czyli <input type="text" name="imię"/> (lub innego elementu formularza) wewnątrz elementu <label> : <label> Wpisz imię: <input type="text" name="imię"/> </label> lub poprzez nadanie polu tekstowemu, czyli <input type="text" name="imię"/> (czy innemu elementowi formularza) dowolnego id (w cudzysłowie nazwa id) oraz dodanie etykiecie label atrybutu for z tą samą wartością, co pozwoli połączyć te dwa znaczniki o Atrybut for służy do określenia elementu formularza, do którego ma zostać przypisana etykieta (czyli komunikat). <label for="imię"> Wpisz imię: </label> <input type="text" name="imię" id="imię"/> W powyższych przykładach: komunikatem dodanym dzięki etykiecie <label> jest: Wpisz imię = imię po for i id łączy elementy label (komunikat) z input type: text (polem tekstowym) 85

86 Dla pola tekstowego możliwe jest także podanie dodatkowych atrybutów, takich jak: Odpowiedź domyślna stosujemy atrybut value o można wpisać domyślną treść danej odpowiedzi, która zostanie dołączona do formularza, jeśli użytkownik nie wpisze innej (może być stosowany kiedy nie chcemy, aby ktoś wypełniał wszystkie pola, skoro niektóre odpowiedzi są niejako narzucone, np. robimy ankietę dla studentów, wersja ankiety rozsyłanej na KULu została zmodyfikowana i w polu: Uczelnia, na której studiuję: od razu jest uzupełniona jako: KUL czyli: <label for="uczelnia"> Uczelnia, na której studiuję: </label> <input type="text" name="uczelnia" value="kul" id= uczelnia /> o podanie wartości początkowej value nie jest konieczne, wystarczy zostawić pusty cudzysłów (nie będzie wyświetlonej na stronie w przeglądarce podpowiedzi, ale układ w kodzie źródłowym będzie pełny z wszystkimi pożądanymi atrybutami) czyli: <label for="uczelnia"> Uczelnia, na której studiuję: </label> <input type="text" name="uczelnia" value="" id= uczelnia /> Długość pola stosujemy atrybut size o można podać długość pola w ilości znaków, które będą w nim jednocześnie widoczne (ilość domyślna bez ustawienia atrybutu size może być różna w zależności od przeglądarek zwykle ok. 21 znaków) - size to wielkość widocznego pola w znakach (gdy zawartość pola będzie dłuższa, będzie ono "przewijane" w prawo, ale uda się wpisać więcej) czyli: Bez ustawiania size: <label for="uczelnia"> Uczelnia, na której studiuję: </label> <input type="text" name="uczelnia" value="" id= uczelnia /> Z atrybutem size (gdy chcemy by pole tekstowe było dłuższe): <label for="uczelnia"> Uczelnia, na której studiuję: </label> <input type="text" name="uczelnia" value="" size= 30 id= uczelnia /> 86

87 Maksymalna ilość znaków, które można wpisać do pola stosujemy atrybut maxlength o można podać maksymalną dopuszczalną ilość znaków, z których może składać się odpowiedź (to maksymalna liczba znaków, jaką można wprowadzić - użytkownik nie będzie mógł wpisać dłuższego tekstu ilość znaków możliwa do wpisania może być mniejsza lub większa niż długość pola) czyli: np. <label for="uczelnia"> Uczelnia, na której studiuję: </label> <input type="text" name="uczelnia" value="" size="30" maxlength="10" id="uczelnia"/> 2. Wielowierszowe pole tekstowe (textarea) jest to pole, w którym użytkownik może wpisać wiele linii tekstu, pozwala ono na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz (dodatkowych uwag, pytań, itp.) <form action="..."> <textarea name="nazwa" cols="x" rows="y"> </textarea> </form> Name - nazwa pola w formularzu (jest to cecha wspólna wszystkich znaczników - elementów formularza) Rows - określa ilość wierszy tekstu (ile linii tekstu ma mieć pole tekstowe - bez przewijania) Cols - określa ilość kolumn (ile znaków ma się mieścić w jednej linii) Dodatkowo, między znacznikami <textarea> a </textarea>, można podać treść domyślną, która pojawi się w tym polu (możliwe jest oczywiście jej późniejsze wymazanie przez użytkownika). W treści domyślnej (którą wstawia administrator strony rysując wielowierszowe pole tekstowe) nie można umieszczać elementów XHTML - wyjątkowo przejścia do nowej linii w kodzie strony są zachowywane i widoczne w polu tekstowym. Np. <textarea name="komentarz" cols="30" rows="3"> Tu wpisz tekst który pojawi się domyślnie </textarea> 87

88 3. Pole hasła - jest bardzo podobne do pola tekstowego. Jest stosowane do podawania hasła, np. przy przechodzeniu do jakiejś strony. Wpisywany tekst będzie zamaskowany, stąd główną zaletą pola tego typu jest ukrycie wpisywanych danych przed postronnym okiem (zamiast wpisywanych znaków na stronie wyświetlą się gwiazdki, zatem osoba postronna, która akurat będzie w pobliżu nie będzie mogła zobaczyć hasła). Niestety pole tego typu nie zapewnia szyfrowania danych czy zabezpieczenia transmisji - jeśli formularz ma być bezpieczny, to należy go umieścić i wysyłać do strony przesyłanej protokołem HTTPS. <form action="..."> <input type=" password " name="nazwa" /> </form> Type to typ pola, w tym wypadku do wpisywania hasła (="password"). Name to nazwa pola, w naszym przykładzie "hasło". Pozostałe atrybuty stosowane jak przy pojedynczym polu tekstowym. Np. <label for="hasło"> Hasło: </label> <input type="password" name="hasło" id="hasło" value="" size="20" maxlength="10"> 4. Pole opcji - polecenie to spowoduje wyświetlenie okrągłego pola, które można zaznaczać myszką - w przypadku gdy istnieje więcej takich pól, to możliwe jest wybranie tylko jednego z elementów o takiej samej nazwie (pole opcji przełącznika jest polem, w którym użytkownik strony wybiera jedną z dostępnych możliwości - kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej <form action="..."> <input type="radio" name="nazwa" value="wartość" /> </form> Type to typ pola, w tym wypadku jednokrotnego wyboru - tzw. przycisk radiowy (="radio"). Name oznacza nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa, gdyż zostanie później wysłana wraz z formularzem. Value jest to treść danej odpowiedzi (odpowiedzi są zamknięte, więc administrator tworzący stronę sam nadaje kody odpowiedziom, które zostaną dołączone do formularza. 88

89 Np. <div> <label for="sexm">mężczyzna</label> <input type="radio" id="sexm" name="sex" value="m"><br /> <label for="sexk">kobieta</label> <input type="radio" id="sexk" name="sex" value="k"><br /> </div> 5. Pole wyboru polecenie to spowoduje wyświetlenie pola w postaci kwadratu, które można zaznaczyć, a także "odznaczyć", myszką gdy istnieje kilka takich pól, to możliwe jest dokonanie wyboru kilku możliwości jednocześnie (pole wyboru jest polem, w którym użytkownik strony będzie mógł zaznaczyć kilka z dostępnych odpowiedzi lub wszystkie, zależnie od treści - kliknięcie w kwadracie pola powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie). <form action="..."> <input type="checkbox" name="nazwa" value="wartość" /> </form> Type to typ pola, w tym wypadku wielokrotnego wyboru (="checkbox "). Name oznacza nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa, gdyż zostanie później wysłana wraz z formularzem (każde kolejne pole zawiera tę samą nazwę, gdyż pytamy o ten sam rodzaj danych, tę samą zmienną). Value jest to treść danej odpowiedzi (odpowiedzi są zamknięte, więc administrator tworzący stronę sam nadaje kody odpowiedziom, które zostaną dołączone do formularza. Np. Pojedynczy znacznik pola wyboru: <label for="regulamin"> Oświadczam, że zapoznałem/am się z regulaminem </label> <input type="checkbox" id="regulamin" name="regulamin" value="" /> 89

90 Kilkukrotny znacznik pola wyboru: <div> </div> <input type="checkbox" id="język1" name="język" value="" /> <label for="język1"> angielski </label> <br /> <input type="checkbox" id="język2" name="język" value="" /> <label for="język2"> niemiecki </label> <br/> <input type="checkbox" id="język3" name="język" value="" /> <label for="język3"> hiszpański </label> <br/> <input type="checkbox" id="język4" name="język" value="" /> <label for="język4"> rosyjski </label> <br/> <input type="checkbox" id="język5" name="język" value="" /> <label for="język5"> polski </label> 6. Pole listy rozwijanej - służy do tworzenia rozwijanych menu, zawierających kilka opcji, często używane w celu zaoszczędzenia miejsca na stronie, w szczególności, gdy lista opcji jest długa (użytkownik strony może wybrać jedną lub kilka opcji, które zostały wcześniej określone przez administratora tworzącego stronę) o Wszystkie elementy listy umieszcza się wewnątrz znacznika <select>, ograniczając je dodatkowo znacznikami <option>. <form action="..."> <select name="nazwa"> <option> Pierwsza możliwość </option> <option> Druga możliwość </option> (...) </select> </form> Name - nazwa danego pola (np. skróconą treść pytania), która zostanie później wysłana wraz z formularzem Zawartość znacznika <option> </option> - to wartość, która zostanie wysłana do serwera po wybraniu któregoś z elementów (każdy znacznik <option>...</option> odpowiada jednej opcji na liście) 90

91 Np. <div> <select name="jezyk"> <option>angielski</option> <option>niemiecki</option> <option>hiszpański</option> <option>rosyjski</option> <option>francuski</option> <option>polski</option> </select> </div> Dodatkowo: Value pozwala na wysłanie w formularzu innych wartości niż treść znaczników <option>...</option> (stosowane przez administratorów w celu zakodowania odpowiedzi w formie skrótów, najczęściej gdy treść opcji jest długa). Np. <select name="jezyk"> <option value="ang">angielski</option> <option value="niem">niemiecki</option> <option value="hisp">hiszpański</option> <option value="rus">rosyjski</option> <option value="fr">francuski</option> <option value="pl">polski</option> </select> 91

92 W wyświetleniu na stronie przeglądarki nic się nie zmieni, inna będzie tylko treść przesłana w formularzu do administratora strony. Na liście rozwijalnej domyślnie wybrany jest pierwszy element., natomiast jeżeli chcemy aby domyślnie nic nie było wybrane, należy dodać na początku pusty element. Np. <select name="jezyk"> <option></option> <option>angielski</option> <option>niemiecki</option> <option>hiszpański</option> <option>rosyjski</option> <option>francuski</option> <option>polski</option> </select> Możliwość wyboru kilku opcji przedstawiony do tej pory sposób tworzenia list umożliwia wybór tylko jednej opcji z listy, natomiast jeżeli chcemy aby lista była wielokrotnego wyboru stosujemy atrybut multiple (kilka możliwości zaznaczamy z pomocą klawisza Ctrl) Np. <select name="jezyk" multiple="multiple"> <option></option> <option>angielski</option> <option>niemiecki</option> <option>hiszpański</option> <option>rosyjski</option> <option>francuski</option> <option>polski</option> </select> 92

93 Np. Określenie wysokości pola stosujemy atrybut size, który ustala ile wierszy zawierających opcje będzie widocznych naraz na ekranie (pole może oczywiście posiadać więcej wierszy opcji, niezależnie od atrybutu size="..." - wtedy pojawi się suwak, a jeśli wysokość pola jest większa niż ilość opcji, to suwak do jego przewijania nie pojawia się) Liczba wierszy pola listy rozwijanej (w atrybucie size) mniejsza niż liczba opcji w liście: <select name="jezyk" size="4" multiple="multiple"> <option></option> <option>angielski</option> <option>niemiecki</option> <option>hiszpański</option> <option>rosyjski</option> <option>francuski</option> <option>polski</option> </select> Liczba wierszy pola listy rozwijanej większa niż liczba opcji w liście: <select name="jezyk" size="10" multiple="multiple"> <option></option> <option>angielski</option> <option>niemiecki</option> <option>hiszpański</option> <option>rosyjski</option> <option>francuski</option> <option>polski</option> </select> Grupy opcji - czasem zachodzi potrzeba wizualnego zgrupowania kilku opcji listy rozwijalnej, możemy pogrupować opcje znacznikami <optgroup>, gdzie nazwę grupy podaje się w atrybucie label (nazwa grupy pojawi się w postaci nagłówka nad opcjami, które zawiera, będzie wyróżniona wizualnie i nie będzie możliwe jej wybranie) - jedna lista rozwijalna może zawierać dowolną liczbę grup opcji, ale nie można ich zagnieżdżać, tzn. umieszczać jednej grupy wewnątrz innej. <select name="nazwa"> <optgroup label="nazwa grupy"> <option>tu wpisz pierwszą możliwość</option> <option>tu wpisz drugą możliwość</option> </optgroup> </select> Np. <select name="drukarki" size="1"> 93

94 <optgroup label="inkjet"> <option>superjet 1400</option> <option>superjet 1405</option> <option>superjet 1405 Plus</option> </optgroup> <optgroup label="laser"> <option>superlaser Value Edition</option> <option>superlaser Pro</option> <option>superlaser Plus</option> </optgroup> </select> Czyszczenie formularza Istnieje możliwość wyczyszczenia wypełnionych pól formularza, w tym celu stosuje się znacznik input typu reset. <form action="..."> <input type="reset" value="treść_na_przycisku" /> </form> Komenda wyświetla na ekranie przycisk, po naciśnięciu którego, nastąpi wyczyszczenie wszystkich udzielonych do tej pory odpowiedzi w ankiecie (np. jeśli się rozmyślimy). Value - określa napis, który pojawi się na przycisku czyszczenia formularza jeśli opuścimy ten parametr, pojawi się tam domyślny napis, np.: "Wyczyść" Np. <input type="reset" value="usuń wypełnioną treść" /> 94

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

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Test z przedmiotu. Witryny i aplikacje internetowe

Test z przedmiotu. Witryny i aplikacje internetowe Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl O HTML R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski www.il.pw.edu.pl/~rg s-rg@siwy.il.pw.edu.pl HTML! HTML jest skrótem od Hyper Text Markup Language. Jest to kolejny język opisu strony dotyczący

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

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

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

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

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

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

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

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

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

Dokument hipertekstowy

Dokument hipertekstowy Dokument hipertekstowy Laboratorium 2 Podstawy HTML mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Cel poznanie podstawowych elementów HTML stworzenie strony ćwiczenie zadanie domowe Konstrukcja

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

Ćwiczenie 8 Kolory i znaki specjalne

Ćwiczenie 8 Kolory i znaki specjalne Ćwiczenie 8 Kolory i znaki specjalne W ćwiczeniu 8 zajmować się będziemy kolorami i znakami specjalnymi. Barwę moŝna utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

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

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

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

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

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>. Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie

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

Szczegółowy opis języka HTML5 znajdziemy w specyfikacji, która jest dostępna pod adresem

Szczegółowy opis języka HTML5 znajdziemy w specyfikacji, która jest dostępna pod adresem HTML (ang. Hyper Text Markup Language) jest to język znaczników używany do tworzenia stron internetowych. Obecnie stosowane są dwie wersje tego języka: HTML 4.01, która obowiązuje już od dawna, oraz HTML5,

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

Ć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

[HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski

[HTML I XHTML ĆWICZENIE 0] dr Artur Bartoszewski I. 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. Znaczniki informują przeglądarkę,

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

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

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

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej adres naszej strony: www.zs3.wroc.pl logo liceum 1. Aby dodać artykuł należy się zalogować: System pokaże nazwę zalogowanego użytkownika

Bardziej szczegółowo

Podstawowe czynnos ci w programie PowerPoint

Podstawowe czynnos ci w programie PowerPoint Podstawowe czynnos ci w programie PowerPoint Program PowerPoint to zaawansowana aplikacja do obsługi prezentacji, jednak aby w pełni wykorzystać jej możliwości, należy najpierw poznać jej podstawowe funkcje.

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

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

Tworzenie prezentacji, PowerPoint

Tworzenie prezentacji, PowerPoint Tworzenie prezentacji, PowerPoint PowerPoint jest programem służącym do tworzenia multimedialnych prezentacji. Prezentacja multimedialna to forma przedstawienia treści (konkretnego zagadnienia), wykorzystująca

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

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

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

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

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy

Wstęp. Język HTML jest uniwersalnym jezykiem wykorzystywanym przy HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów

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

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

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

29. Poprawność składniowa i strukturalna dokumentu XML

29. Poprawność składniowa i strukturalna dokumentu XML 29. i strukturalna dokumentu XML 13 października 2015 1 2 Poprawny składniowo dokument XML powinien być tworzony zgodnie z poniżej przedstawionymi zasadami. Deklaracja XML Powinien zawierać deklarację

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

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

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

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki

Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Zadaniem tego laboratorium będzie zaznajomienie się z podstawowymi możliwościami kompozycji strony i grafiki Edytory tekstu oferują wiele możliwości dostosowania układu (kompozycji) strony w celu uwypuklenia

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

Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych

Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych odnośniki Część 3 Odnośniki jeszcze do niedawna odróżniały strony WWW od wszystkich innych dokumentów elektronicznych. Możliwość deklarowania odnośników do innych dokumentów niezależnie od ich umiejscowienia

Bardziej szczegółowo

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku W swoim folderze utwórz folder o nazwie 29_10_2009, wszystkie dzisiejsze zadania wykonuj w tym folderze. Na dzisiejszych zajęciach nauczymy

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

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19

Spis treści. Rozdział 2. Graficzna oprawa witryny...z... 19 Stosowanie motywu...s...s.. 19 Spis treści Wstęp...z... 5 Rozdział 1. Nowa witryna sieci Web...z... 7 Tworzenie szkieletu witryny...s... 7 Ustawienia witryny...s...s... 8 Hierarchia witryny...s...s... 10 Nazwy i tytuły stron...s...s..

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria obrazów Amiant... 5 4. Lista stron... 8 5. Aktualności...

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

Ć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

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

Numeracja dla rejestrów zewnętrznych

Numeracja dla rejestrów zewnętrznych Numeracja dla rejestrów zewnętrznych System ZPKSoft Doradca udostępnia możliwość ręcznego nadawania numerów dla procedur i dokumentów zgodnie z numeracją obowiązującą w rejestrach zewnętrznych, niezwiązanych

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

Wymagania na poszczególne oceny w klasach 3 gimnazjum

Wymagania na poszczególne oceny w klasach 3 gimnazjum Wymagania na poszczególne oceny w klasach 3 gimnazjum Znaczenie komputera we współczesnym świecie Przypomnienie wiadomości na temat języka HTML Wstawianie tabeli na stronę WWW Wstawianie listy punktowanej

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

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

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

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

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

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

Informatyka w zarządzaniu III rok - HTML

Informatyka w zarządzaniu III rok - HTML Informatyka w zarządzaniu III rok - HTML Wstęp Języki programowania (technologie) powiązane z Internetem w kolejności zgodnej ze wzrastającym stopniem skomplikowania: HTML i XHTML, arkusze stylów (CSS),

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

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main.

znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main. Część XVI C++ Funkcje Jeśli nasz program rozrósł się już do kilkudziesięciu linijek, warto pomyśleć o jego podziale na mniejsze części. Poznajmy więc funkcje. Szybko się przekonamy, że funkcja to bardzo

Bardziej szczegółowo

Projektowanie aplikacji internetowych - ćwiczenie nr 1 I

Projektowanie aplikacji internetowych - ćwiczenie nr 1 I ET stopień - semestr 1. CEL ĆWCZENA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML i w oparciu o te wiadomości wykonanie prostej witryny internetowej składającej się z zestawu stron w języku

Bardziej szczegółowo

Zalogowanie generuje nowe menu: okno do wysyłania plików oraz dodatkowe menu Pomoc

Zalogowanie generuje nowe menu: okno do wysyłania plików oraz dodatkowe menu Pomoc Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej autor poradnika - KS 1. Aby dodać artykuł należy się zalogować: System pokaże nazwę zalogowanego użytkownika (lewy dół strony) Zalogowanie

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość

Dziedziczenie. Dziedziczenie i kaskadowość. Dodał Administrator środa, 10 marzec :00. Tematy: Dziedziczenie Kaskadowość Tematy: Dziedziczenie Kaskadowość Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią ważności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów

Bardziej szczegółowo

Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp

Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp Barbara Łukawska, Adam Krechowicz, Tomasz Michno Ćwiczenie nr 12: Tworzenie stron internetowych z użyciem języka HTML Wstęp Najprostszym sposobem utworzenia strony internetowej jest użycie języka HTML.

Bardziej szczegółowo

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE

SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE Politechnika Gdańska Wydział Elektrotechniki i Automatyki Katedra Inżynierii Systemów Sterowania SIECI KOMPUTEROWE I TECHNOLOGIE INTERNETOWE Temat: Prosty serwis internetowy oparty o zestaw powiązanych

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

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

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

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

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

TWORZENIE PREZENTACJI MS POWERPOINT

TWORZENIE PREZENTACJI MS POWERPOINT TWORZENIE PREZENTACJI MS POWERPOINT Wstęp TWORZENIE PREZENTACJI MS POWERPOINT Czasami zdarza się, że zostajemy poproszeni o poprowadzenia spotkania czy szkolenia w firmie, w której pracujemy lub po prostu

Bardziej szczegółowo

ĆWICZENIE 1 SKŁAD TEKSTU DO DRUKU

ĆWICZENIE 1 SKŁAD TEKSTU DO DRUKU ĆWICZENIE 1 SKŁAD TEKSTU DO DRUKU 1. Skopiowanie przykładowego surowego tekstu (format.txt) wybranego rozdziału pracy magisterskiej wraz z tekstem przypisów do niego (w osobnym pliku) na komputery studentów.

Bardziej szczegółowo

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy

ĆWICZENIA Z JĘZYKA HTML. 1. Znaczniki. 2. Struktura dokumentu HTML. 3. Tworzymy stronę WWW Podróże po stolicach Europy Informatyka - podstawowe tematy WSzPWN - Język HTML, podstawy str. 1 ĆWICZENIA Z JĘZYKA HTML Struktura dokumentu, znaczniki, tabele, hiperłacza Być może trudno w to uwierzyć, jednak strony WWW są tekstem

Bardziej szczegółowo

ZNACZNIKI META. Znacznik META

ZNACZNIKI META. Znacznik META ZNACZNIKI META Znacznik META element dokumentu HTML dostarczający informacji niewidocznych dla użytkowników, lecz istotnych z punktu widzenia odbiorców dokumentu przeglądarek i serwisów wyszukiwawczych

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

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

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo

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

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami. Podstawy HTML 1. HTML - to język formatowania dokumentów elektronicznych, który pozwala uformować tekst oraz połączyć go z grafiką. Dokument HTML ma postać pliku tekstowego, gdzie tekst przeplatany jest

Bardziej szczegółowo

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki

Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5. Moduły i bloki Poradnik obsługi systemu zarządzania treścią (CMS) Concrete5 Moduły i bloki 1 Spis treści 1. Dodawanie bloków... 3 2. Treść i Dodaj odstęp... 3 3. Galeria zdjęć... 5 4. Lista stron... 8 5. Aktualności...

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

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

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS PROBLEMY TECHNICZNE Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS Jeżeli stwierdziłeś występowanie błędów lub problemów podczas pracy z programem DYSONANS możesz skorzystać

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

Formatowanie c.d. Wyświetlanie formatowania

Formatowanie c.d. Wyświetlanie formatowania Formatowanie c.d. Wyświetlanie formatowania Dzięki tej funkcji można łatwo sprawdzić, w jaki sposób został sformatowany dowolny fragment tekstu. Aby jej użyć, wybierz polecenie naciśnij Shift+F1. Na prawo

Bardziej szczegółowo

Sieci i systemy operacyjne I Ćwiczenie 1. Podstawowe polecenia systemu Unix

Sieci i systemy operacyjne I Ćwiczenie 1. Podstawowe polecenia systemu Unix Wydział Zarządzania i Modelowania Komputerowego Specjalność: Informatyka Stosowana Rok III Semestr V 1. Logowanie w systemie Unix. Sieci i systemy operacyjne I Ćwiczenie 1. Podstawowe polecenia systemu

Bardziej szczegółowo