informatyka w zarządzaniu – iii rok - html · w końcu warstwa zachowania zawiera skrypty,...
TRANSCRIPT
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.
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 http://). 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.
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 208.201.239.37. 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.
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.
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" "http://www.w3.org/TR/html4/strict.dtd"> 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
7
Sekcja head: Tytuł strony
<title>Tytuł strony</title> Sposób kodowania znaków
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 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-8859-2 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-8859-2"> 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-8859-2">
<meta charset= windows-1250">
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-8859-2"> </head> <body> ą ć ę ł ń ó ś ź ż Ą Ć Ę Ł Ń Ó Ś Ź Ż </body> </html> Następnie powtórz operację wpisując charset= windows-1250.
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 -8859-2. Obecnie coraz częściej stosuje się jednak uniwersalny system kodowania UTF-8. O ile ISO-8859-2 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.
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 1996 14: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:
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.
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 ma ją 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 />.
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.
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).
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.
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)”>
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 inne j 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.
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>
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 2.2.1 </li> <li> Podpunkt 2.2.2 </li> </ul> (zamknięcie listy na trzecim poziomie) </li> (zamknięcie podpunktu 2.2) </ul> (zamknięcie listy na drugim poziomie) </li> (zamknięcie Punktu 2) <li> Punkt 3 (kontynuacja punktów pierwszego poziomu) </li> <li> Punkt 4 </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:
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
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).
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).
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).
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:
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. http://www.colorpicker.com
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-8859-2, na to nie pozwala), lub też dany znak jest trudny do wpisania (tzn. nie ma go na klawiaturze). Obecnie ze względu na możliwość zastosowania standardu kodowania znaków UTF-8 (lub innego opartego na Unicode) pierwszy argument stracił znacznie na aktualności, ale drugi nadaj jest aktualny. W dokumencie źródłowym w ich miejsce stosuje się tak zwane znaki ucieczki (ang. escape characters). Oznacza to, że zamiast wpisywać sam znak, zastępuje się go liczbowym lub nazwanym odniesieniem do znaku. Kiedy przeglądarka napotyka odniesienie do znaku, zastępuje je prawdziwym znakiem, w czasie gdy strona jest wyświetlana. Istnieją dwie możliwości odniesienia się do określonego znaku: za pomocą przypisanej mu wartości numerycznej (encji liczbowej) albo za pomocą zdefiniowanej skróconej nazwy tego znaku (nazywanej encją znakową). Wszystkie odniesienia do znaków rozpoczynają się od znaku & i kończą się średnikiem (;). Każdy znak specjalny musi rozpoczynać się od znaku ampersand "&", i kończyć znakiem średnika ";". Warto także wiedzieć że znaki specjalne HTML mogą zostać napisane na jeden z trzech sposobów:
poprzez podanie nazwy znaku, np: & poprzez podanie kodu dziesiętnego znaku poprzedzonego znakiem "#", np: &
poprzez podanie kodu szestnastkowego znaku poprzedzonego znakami "#x", np: & W poniższej tabeli znajdziesz wszystkie znaki specjalne które są najczęściej używane:
Symbol Nazwa encji Numer encji
& & &
< < <
> > >
Spacja nierozdzielająca    
Cent ¢ ¢
Funt £ £
Yen ¥ ¥
© © ©
® ® ®
° ° °
± ± ±
† &dagger †
™ &trade ™
26
Jeśli chce się zobaczyć wszystkie, pełna lista odniesień do znaków została opublikowana w Internecie
http://www.webstandards.org/learn/reference/charts/entities
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>
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=" http://pl.wikipedia.org/wiki/Leopold_Staff "><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.
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 (http://), 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=”http://www.helion.pl/”
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: https://www.microsoft.com/pl-pl/download
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.
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.
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).
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>
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):
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
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”.
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 e-mail pojawi się automatycznie. Konstrukcja takiego odsyłacza wygląda następująco:
<a href="mailto:adres e-mail"> Tekst odsyłacza </a>
np. <a href=mailto:[email protected]> Wyślij do mnie e-maila (czy inny tekst odsyłacza) </a> W miejscu wyświetlenia komunikatu można umieścić adres e-mail, by był widoczny bezpośrednio na ekranie przeglądarki, np.: <a href=mailto:[email protected]> [email protected] </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: [email protected])
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 e-mail” 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>
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 */
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ą.
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 czcionk i 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.
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:
Kilka cech dla jednego selektora : np.
hr { 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.
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ą
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 font-size w nowoczesnym projektowaniu stron internetowych są wielkości podawane w em, wartościach procentowych oraz za pomocą słów kluczowych.
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”
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, 900 - każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji,
np. p {font-weight: bold} <p style="font-weight: bold">
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.
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%}
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).
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 { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;} – każdy margines ustawiany osobno lub w skrócie: body { 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).
51
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
body{ margin: 10px 20px} – pierwsza wartość ustawia górę i dół, druga prawą i lewą stronę
body { 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ść.
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
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}
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;}
Możemy oczywiście łączyć wszystkie te znaczniki:
p { 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 */
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.
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=”” />
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.
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 }
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:
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.
Np.:
<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.
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.
61
W przypadku naszej strony:.
body {
background-image: url("plik_graficzny"); background-repeat: repeat-y }
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 background-
position: 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).
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 }
64
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)
Np.
body { 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;}
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
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: g rey;
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 font o text-decoration o tekst-align o margin o padding
o float o background o border o letter-spacing o word-spacing
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>
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.
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> <th>Składnik menu</th>
<th>Kalorie</th>
<th>Tłuszcz (g)</th>
</tr>
<tr> <td>Rosoł z makaronem</td>
<td>120</td>
<td>2</td>
</tr>
<tr> <td>Sałatka cesarska</td>
<td>400</td>
<td>26</td>
</tr>
</table>
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>
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>
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.
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">
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.
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
Kolor – tło może mieć jednolity kolor (tak jak w przypadku body) o Możemy ustawić tło dla całej tabeli:
Np.
<table style="background-color: red">
lub w css:
table{
background-color: red}
o Lub dla poszczególnej komórki:
Np.
<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 }
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>
o Za pomocą stylów CSS możesz zdefiniować położenie tytułu
nad (top) tabelą lub
pod (bottom) tabelą:
Np.
<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}
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>
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 konf igurujemy 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{
…}
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{
…}
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>
80
<body>
<div class="sekcja_nagłówkowa">
<a href="zad 37c.html" tit le="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.g if" /></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 Maxip lon </td>
<td> 14,99</td>
<td> Tak </td>
</tr>
<tr>
<td>CH548291</td>
<td>Naturalne herbicydy firmy Maxip lon</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>
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=" mailto:[email protected]"> 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;}
82
.całość{
margin:0 auto;
text-align: center;
width: 1140px}
.left{
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}
.right{
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}
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).
84
<form action=”mailto:twój_adres_email”> … </form>
Np.
<form action=”mailto:[email protected]”>
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 email zawsze używamy metody post (get nie zadziała – na emaila nic nie dotrze)
<form action=”mailto:twój_adres_email” method=”post”> … </form>
np.
<form action=”mailto:[email protected]” 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_email?temat_formularza”> … </form>
Np.
<form action=”mailto:[email protected]?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_email?temat_formularza” method=”post” enctype="text/plain">
…
</form>
85
Np.
<form action=”mailto:[email protected]?rejestracja” 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)
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”/>
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>
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.
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="" />
90
Kilkukrotny znacznik pola wyboru:
<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>
</div>
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)
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>
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>
93
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ę)
Np.
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">
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ść" />
95
Wysłanie formularza
Wysłanie formularza umożliwia znacznik input typu submit - po naciśnięciu przycisku przez
użytkownika strony, dane zostaną przesłane pod adres podany jako wartość atrybutu action w definicji
formularza.
<form action="...">
<input type="submit" value="treść_na_przycisku" />
</form>
Polecenie wprowadza na ekran przycisk z tekstem, po naciśnięciu którego, nastąpi wysłanie
formularza.
Value - okresla napis, który pojawi się na przycisku wysyłania formularza.
jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Wyślij"
Np.
<input type="submit" value="Wyślij dane zawarte w formularzu"/>
Przykładowa pełna strona zawierająca formularze :