czwartek, 2 Grudzień 2010
Aby język HTML był zgodny z XML i stał się językiem modułowym, konieczne jest respektowanie szeregu zasad składni. Najważniejszą z nich jest zasada prawidłowego zarządzania znacznikami. Przeglądarki dość swobodnie obsługują HTML. Kwestia zamknięcia znaczników (takich jak na przykład <H1>) nie zawsze jest istotna, czego przykładem jest też znacznik <p>. Oto kod HTML, który zostanie poprawnie zinterpretowany przez każdą przeglądarkę:
<html>
<body bgcolor=”#FFFFFF” text=”#000000”>
<p><font face=”Arial” size=”4”>Ten tekst będzie poprawnie wyświetlany.
<p>Nawet jeśli niektóre znaczniki nie zostaną prawidłowo zamknięte.
Przeglądarka trzymająca się ściśle definicji XHTML-Strict nie wyświetliłaby tekstu reprezentowanego w tym kodzie. Przede wszystkim znaczniki <p> i <font> nie mają znaczników zamykających. Obowiązujący w obrębie XML ścisły sposób zarządzania znacznikami wymaga, aby wszystkie znaczniki zostały prawidłowo zamknięte. Ponadto znacznik <font> nie jest obsługiwany w XHTML. Formatowanie wprowadzane jest tylko poprzez kaskadowe arkusze stylów. W przedstawionym dokumencie brakuje także deklaracji typu dokumentu. Deklaracja taka powinna otwierać kod i identyfikować dokument jako dokument XML oraz podawać ulokowanie pliku DTD, który pomaga zinterpretować znaczniki XML.
Aby podany w przykładzie kod działał poprawnie jako XHTML, musi mieć następującą postać:
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>XHTML Page</title> <style type=”text/css” xml:space=”preserve”>
body {
background-color: #FFFFFF;
color: #000000; }
P {
Font-Family: Arial;
Font_size: 14pt; } </style> </head> <body> <p>Ten tekst będzie poprawnie wyświetlany.</p> </html>
W dokumencie pojawiły się pewne nowe elementy. Natychmiastowa zmiana, widoczna na pierwszy rzut oka, to deklaracja XML, umieszczona na początku kodu. Typ dokumentu to: html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN, jest to wersja Strict języka XHTML.
Istnieją trzy typy języka XHTML: Strict, Transitional i Frames. XHTML-Strict jest implementacją języka XHTML zgodną ze standardem XHTML 1.0. XHTML-Transitional to definicja XHTML, która dopuszcza stosowanie w składni znaczników specyfikacji HTML 4.0 w celu umożliwienia przejścia z jednego języka do drugiego. XHTML-Frames to wersja języka, która akceptuje stosowanie ramek Netscape na stronach XHTML.
Kolejny wiersz kodu: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd, skierowuje przeglądarkę do miejsca, z którego może ściągnąć odpowiedni plik DTD niezbędny do interpretacji dokumentu.
Przestrzeń nazw jest zdefiniowana w znaczniku <HTML>. Podany jest w nim adres określający lokalizację przestrzeni nazw w Internecie.
XHTML nie dopuszcza formatowania tekstu za pomocą znaczników <font> i <body>. Formatowanie wprowadzają więc w przykładowym dokumencie kaskadowe arkusze stylów. Kolor tła został zdefiniowany jako biały (#FFFFFF), a kolor tekstu jako czarny (#000000). Styl zawartości znacznika <P> został określony jako Arial o rozmiarze 14pt.
Pozostała część dokumentu ma postać taką samą jak w HTML-u, aczkolwiek nie zawiera znaczników formatujących.
Są to tylko nieliczne ze zmian, które trzeba wprowadzić, by dokument uczynić zgodnym z formatem XHTML. Konieczna jest rezygnacja z wielu znaczników HTML stosowanych przez twórców stron. Jak już wspomniano, znacznik <FONT> trzeba zastąpić arkuszem CSS. To samo dotyczy znacznika <CENTER>. Funkcje tego znacznika powinien przejąć arkusz CSS. Znacznik <I> wymaga zastąpienia równoważnym znacznikiem <EM>, a znacznik <B> należy zamienić na znacznik <STRONG>.
Nie stosuj znacznika <FONT>. Aby unikać tego znacznika, nie wprowadzaj formatowania tekstu z poziomu inspektora Text Properties, lecz stosuj kaskadowe arkusze stylów.
Znacznik <HTML> musi zostać zmodyfikowany w widoku kodu do takiej oto postaci:
<?xml version=”1.0”?>
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
Nie zapominaj o znacznikach zamykających. Na przykład wszystkie znaczniki <P> powinny mieć swoje znaczniki zamykające </P>.
Jeśli będziesz trzymał się tych trzech zasad, nie ma powodu, aby utworzone dokumenty HTML nie dały się przekonwertować do postaci XHTML.
Pełny opis procedury dostosowywania dokumentu do standardu XHTML znajdziesz w witrynie W3C, pod adresem www.w3.org/MarkUp. Jest tam także dostępna wyczerpująca dokumentacja nowego standardu oraz połączenia do narzędzi konwersji stron napisanych w języku HTML 4 do postaci XHTML.
W3C dostarcza zestaw narzędzi do przekształcania stron w postać XHTML. Narzędzia te znajdziesz na stronach witryny W3C HTML Validation Service, pod adresem http://validator.w3.org. Jedno z nich, HTML Tidy, pozwala konwertowaćźle napisane dokumenty HTML, na przykład takie jak dokumenty generowane przez edytor Microsoft Word, do postaci zgodnej ze standardem XHTML.
HTML 4 wykazuje dużo podobieństw do języka XHTML. W obu językach formatowanie wymaga stosowania kaskadowych arkuszy stylów i niezbędne jest zamykanie znaczników akapitu. Pod wieloma względami XMTML stanowi po prostu odmianę języka HTML 4, spełniającą zasady składni języka XML. Dzięki stworzeniu wersji języka HTML 4 będącej pochodną języka XML, szereg rozszerzeń, dodawanych w przyszłości do XHTML-a, będzie mogło mieć postać modułową.
XHTML 1.0 pozwala nowym urządzeniom internetowym – pomocnikom cyfrowym PDA, konsolom do gier i interaktywnym odbiornikom TV – korzystać z najnowszych standardów WW. Wszystko, co jest potrzebne, to przeglądarka, która potrafi zinterpretować XML i definicje typu dokumentu. Projektant nadal może używać edytorów tekstowych, aby w nich tworzyć swoje strony.
Wobec gwałtownie zmieniającego się oblicza Internetu, dodanie modułowego i rozszerzalnego języka jakim jest XHTML, to naturalne dopasowanie się.
Programiści i twórcy korzystający z nowych, dopiero kształtujących się technologii, zawsze staną wobec następującego problemu: Czy powinno się korzystać z nowej opcji obsługiwanej tylko przez wersje przeglądarek najnowszej generacji, mając pełnąświadomość, że niewielu odbiorców korzysta z takiego oprogramowania? Czy nie należałoby w takim razie skupić się na szerszej grupie użytkowników i przyjąć kryterium zgodności ze starszymi wersjami przeglądarek?
Tworzenie stron internetowych jest zajęciem dla programisty, który zawsze musi wiedzieć, jakie przeglądarki są aktualnie najpopularniejsze. Kod źródłowy to samo serce strony WWW. Umiejętność samodzielnego pisania kodu stron jest niezbędna, aby w pełni zrozumieć strony WWW jutra.
Tagi: html, xhtml
Kategoria: Tworzenie stron | Komentarze są wyłączone
środa, 10 Listopad 2010
Dla większości z nas podstawowe doświadczenie z surfowania po Internecie kojarzy się przede wszystkim z jednym – z interaktywnością. Jak wiesz, zawartość Internetu jest wytworem wielu różnych technologii. Niektóre, jak na przykład Flash, pozwalają umieszczać na stronach WWW animacje i dźwięki. Inne dają możliwość oglądania sekwencji filmowych, prezentacji panoramicznych czy nawet korzystania z gier sieciowych. Od tych wszystkich elementów multimedialnych razem ważniejsza jest możliwość zaangażowania użytkownika w prezentacje, które udostępniasz w sieci. U podstaw tej interaktywności znajduje się JavaScript.
Jako taki, HTML należy do tych języków programowania, których możliwości tworzenia zaawansowanej zawartości multimedialnej są raczej ograniczone. Wynika to z faktu, że HTML opisuje głównie elementy statyczne. Tak więc, nie daje możliwości ich zmiany w czasie, nie pozwala także, by zmiany takie wprowadzał klient czyli użytkownik. Te braki języka HTML uzupełnia JavaScript. Ponieważ HTML to narzędzie statyczne (co znaczy, że coś raz wyświetlone, takie pozostaje), tworzenie interaktywnych stron WWW wymaga sięgnięcia po inne języki programowania.
Niektóre z tych języków, na przykład Pearl czy PHP, działają na serwerach sieciowych, więc należą do grupy języków do tworzenia aplikacji działających po stronie serwera. Języki te dają bardzo szerokie możliwości, lecz wymagają jednego: pobrania od użytkownika danych, które dopiero zostaną poddane obróbce. Pociąga to za sobą oczywistą negatywną konsekwencję – spowolnienie pracy. Skorzystanie przez użytkownika z interaktywności wymaga tu wysłania danych do serwera sieciowego, odczekania, pobrania odpowiedzi z serwera i, zazwyczaj, wyświetlenia innej strony.
Inna grupa języków stosowanych szeroko w sieci to języki służące do tworzenia aplikacji działających po stronie klienta. Znaczy to, że napisane w nich programy są wysyłane do użytkownika, aby mogły być wykonywane w czasie, gdy oglądana jest strona. Daje to zdecydowaną przewagę nad aplikacjami działającymi po stronie serwera, bowiem eliminuje opóźnienie. Musisz jednak zdawać sobie sprawę, że skrypty działające po stronie klienta nie są tak odporne jak ich odpowiedniki działające po stronie serwera, a więc jak na razie oba elementy są konieczne.
JavaScript działa głównie po stronie klienta. W swojej najpopularniejszej formie język ten stosowany jest w połączeniu z językiem HTML w celu zwiększenia funkcjonalności strony WWW. Ponieważ skrypty JavaScript można umieszczać bezpośrednio w kodzie HTML strony, technologia ta jest najlepiej dostosowana do sieci – skrypty mogą powstać znacznie wcześniej niż strona WWW. Dlatego jeśli widzisz stronę, oznacza to, że jest ona już działająca.
Podstawą technologii JavaScript jest technologia popularnie określania mianem programowania zorientowanego obiektowo. Zastanów się nad określeniem: „zorientowany obiektowo”. Obiekt, tak jak osoba, miejsce lub rzecz to coś namacalnego, coś, co może wykonać działanie lub coś, co można opisać. Zorientowanie kojarzy się natomiast z ukierunkowaniem. W przypadku języka JavaScript obiekty, na które się ukierunkowujemy są elementami hierarchii, na szczycie której znajduje się okno przeglądarki.
Być może brzmi to dla Ciebie jak rzecz oczywista lub wprost przeciwnie, wydaje się nieco zawiłe. Niezależnie od wszystkiego, jesteś w odpowiednim miejscu, aby zanurzyć się w samo serce języka JavaScript. Jako nowicjusz nie napiszesz na początku bardzo skomplikowanych programów, lecz przy swojej znajomości języka HTML już umiesz więcej niż Ci się wydaje.
W języku JavaScript można wydzielić dwa odrębne obszary. Pierwszy z nich obejmuje to, co wbudowane, a więc to, co wiąże się z kwestiami programistycznymi i składnią języka. Na drugi obszar składa się to, co tworzysz – są to na przykład funkcje użytkownika (pod tym określeniem kryje się zestaw instrukcji, które wykonują cały szereg zadań) oraz dane, które chcesz zgromadzić w pamięci.
W swej najprostszej postaci zmienne to środek przechowywania informacji w pamięci w celu dalszego wykorzystania. Postać informacji może być różna: są to łańcuchy alfanumeryczne, dane liczbowe lub wartości boolowskie. Zmienną definiuje wyraz var. Chyba najwięcej problemów stwarza początkującym użytkownikom zrozumienie różnicy między łańcuchem znaków a zmienną numeryczną. W uproszczeniu zmienna łańcuchowa przenosi dane, natomiast zmienna numeryczna przechowuje wartości w celu dalszego ich zbadania za pomocą testu lub obliczenia.
Aby dokładniej to zrozumieć, oprzyjmy się na praktycznym przykładzie. Jeśli chcesz zapamiętać czyjeś dane personalne i numer telefonu, zapisujesz wszystko na kawałku papieru. Później sięgasz po niego, odczytujesz co napisałeś i postanawiasz umieścić dane w książce adresowej. Ten proces odpowiada zapisywaniu łańcucha. Tworzą go dane, do których chcesz mieć dostęp później. Można by to zapisać w postaci takiego oto wyrażenia:
var nameAddress = ” Joe 555-5555”.
Jeśli jednak zapisałeś tylko numer, na przykład 25, numer ten może Ci później posłużyć do określenia nowej wartości. Powiedzmy, że w każdej skrzynce masz 25 jabłek, a skrzynki są trzy. Liczbę jabłek w skrzynce można wyrazić w następujący sposób:
var boxApples = 25
Liczbę skrzynek natomiast opisuje zmienna:
var boxTotal = 3
Wartość odkreślającą liczbę jabłek (25) i wielokrotność tej wartości (3) odpowiadającą liczbie skrzynek można wykorzystać do obliczenia całkowitej liczby jabłek:
var totApples = boxApples*boxTotal
Jeśli zapytasz JavaScript, ile wynosi totApples, zwrócona Ci odpowiedź wyniesie 75. Jest to niewątpliwie wartość numeryczna.
Tworząc zmienną, określasz po prostu, że:
var nazwa_zmienej = wartość
W tym wyrażeniu var to deklaracja zmiennej, nazwa_zmiennej jest nazwą, którą nadajesz zmiennej, a wartość to informacja, którą chcesz przechować w zmiennej i z nią stowarzyszyć.
Jeśli informacja ma być łańcuchem znaków – co oznacza, że nie chcesz, aby była ona interpretowana – umieszczasz wartość w cudzysłowie:
var nazwa = ”Blaine”
Jeśli informacja jest liczbą i będzie później wykorzystana w obliczeniach, podajesz ją po prostu bez cudzysłowu:
var total = 8
W końcu, jeśli informacja jest prawdziwa lub fałszywa, określasz wartość jako true lub false, nie stosując cudzysłowu:
var customer = true
Podsumowując: jeśli chcesz tylko przechować informację, stosujesz cudzysłów, co zapobiega jej interpretowaniu; natomiast jeśli chcesz, aby informacja została wykorzystana w obliczeniach lub do określenia prawdziwości warunku, nie stosujesz cudzysłowu.
JavaScript to język zorientowany obiektowo, co oznacza, że w swoich operacjach odwołuje się do elementów zwanych obiektami. Sięgnąć tu możemy po analogię z rzeczywistymi obiektami trójwymiarowymi, takimi jak na przykład pudło lub balon.
Co więcej, obiekty te można opisać i rozróżnić za pomocą właściwości. I tak na przykład można zapisać box.color = ”blue”, gdzie box to obiekt, color to jego właściwość, a blue jest wartością właściwości.
Metody pozwalają przypisać obiektowi behawior. Metoda to akcja, którą obiekt ma przeprowadzić (ważne jest, aby zdać sobie sprawę, że to nie użytkownik, lecz obiekt jest tym, do którego akcje należą). Wracając do wcześniejszej analogii, można napisać:
box.enclose()
Tutaj boxjest obiektem, a enclose to metoda. Jak pewno zauważyłeś, za metodą pojawiają się nawiasy. W tych nawiasach możesz umieścić argument. Argument to wiadomość, która ma być przekazana obiektowi. Oto przykład:
box.enclose(”stapler”)
Nie wszystkie metody wymagają argumentów.
Funkcje pozwalają zapisać wyrażenie (lub zestaw wyrażeń), z którego potem można korzystać wywołując tylko nazwę. Rzuć okiem na następujący przykład:
function Package(){ box.enclose(”stapler”) };
Jeśli później wywołasz tę funkcję, wykonane zostanie wyrażenie box.enclose(”zszywacz”). Nie musisz więc przepisywać wyrażenia, ilekroć chcesz go użyć. Zauważ, że wyrażenie zawarte jest w nawiasach klamrowych, {}. Wywołanie funkcji pociąga za sobą wykonanie wszystkich wyrażeń umieszczonych w tych nawiasach.
Wreszcie, jeśli chcesz, aby funkcja była wykorzystywana w różnorodnych sytuacjach, zastosuj ją ze zmienną:
var itemname = ”stapler”
function Package(itemname){
box.enclose(itemname)
};
Poprzez utworzenie zmiennej itemname, wszystko, do czego ją przyrównasz, zostanie przekazane do funkcji i metody enclose.
Procedury obsługi zdarzeń ułatwiają interakcję użytkownika i stworzonego przez Ciebie skryptu. Gdy użytkownik na przykład przesuwa wskaźnik myszki nad określonym elementem graficznym lub klika, możesz za pomocą procedury obsługi zdarzenia uruchomić funkcję:
onclick = ”Package()”
Tutaj onClick to procedura obsługi zdarzenia, a ”Package” jest funkcją, która ma być wykonana.
Tagi: html, javascript
Kategoria: Tworzenie stron | Komentarze są wyłączone
sobota, 22 Sierpień 2009
Kolorowy tekst zwiększa siłę wizualnego oddziaływania Twoich stron WWW. Mógłbyś na
przykład zdefiniować tekst podstawowy w kolorze kontrastującym z kolorami nagłówków. Lub
punkt ciężkości położyć na bardzo kolorowe nagłówki, stosując do stopki jedynie delikatne
formatowanie, a tekst podstawowy wyświetlając białą czcionką na czarnym tle. Chociaż w fazie
projektowania wybór odpowiedniego koloru tekstu zawsze jest trudny, bloga pomaga
skutecznie w implementacji tego, co już zostanie wybrane.
Sięgnij ponownie do inspektora Property (możesz skorzystać także z pozycji Color w menu Text)
i rozwiń paletę kolorów, którą znajdziesz z prawej strony listy Text Size (patrz rysunek 4.8).
Paleta ta umożliwia wybranie koloru tekstu. Rysunek 4.10 pokazuje ją w postaci czarno-białej.
Aby zmienić kolor tekstu, zaznacz tekst (musisz korzystać z widoku projektu) i rozwiń paletę
kolorów inspektora Property. Wskaż na niej bezpieczny kolor, który chcesz zastosować i naciśnij
OK. bloga udostępnia kilka palet kolorystycznych, w tym palety kolorów stosowanych
w systemach Windows i Macintosh. Aby z nich skorzystać, kliknij przycisk ze strzałką, z prawej
strony palety, i wybierz odpowiednią pozycję menu.
Po wybraniu koloru z palety kolorów inspektora Property, kod szesnastkowy koloru pojawia się
w polu tekstowym, obok próbki koloru. Kod ten składa się z kilku liter i cyfr poprzedzonych
znakiem #. Taka kombinacja znaków stanowi w języku HTML informację dla przeglądarki
odnośnie koloru, który ma wyświetlić. Ponieważ posługujesz się programem bloga, nie
musisz się zagłębiać w szczegóły działania kodów szesnastkowych.
Alternatywna metoda definiowania koloru polega na bezpośrednim wpisaniu kodu
szesnastkowego koloru w polu tekstowym inspektora Property. Można także używać nazw
kolorów ? takich jak na przykład pink czy green. Począwszy od wersji 3 większość przeglądarek
sieciowych akceptuje taki sposób definiowania koloru. Zaleca się jednak stosowanie kodów
szesnastkowych, bowiem zapewniają one porównywalny wizualnie efekt w różnych
Za pomocą próbnika kolorów możesz pobrać kolor z dowolnego elementu na ekranie, także poza
paletą kolorów. Możesz nawet pobierać próbki koloru z obrazów programu Fireworks. Jest to
niezwykle wygodna opcja programu bloga, aczkolwiek niedoceniana.
Aby przywrócić ustawienia domyślne dla koloru, kliknij w inspektorze Property przycisk
rozwijania palety kolorów, a następnie naciśnij przekreślony na czerwono przycisk ulokowany w
jej prawym górnym rogu.
Tagi: html, kolor, tekst
Kategoria: Tworzenie stron | Komentarze są wyłączone
piątek, 21 Sierpień 2009
Czasami chcesz zastosować do tekstu wcięcie, ale niekoniecznie metodą okrężną, poprzez
utworzenie listy wypunktowanej lub numerowanej. W inspektorze Property masz do dyspozycji
dwa narzędzia służące do definiowania wcięć: Text Outdent i Text Indent. Znajdziesz je na
rysunku 4.8 (są ulokowane poniżej ikon wyrównania do lewego marginesu i wycentrowania).
Aby zastosować do tekstu wcięcie, zaznacz w widoku projektu tekst i kliknij ikonę wcięcia
(przycisk Text Indent). Tekst zostanie odsunięty od lewego marginesu. Głębokość wcięcia można
zwiększać kolejnymi naciśnięciami przycisku Text Indent. Trzeba jednak pamiętać, że im więcej
takich kliknięć, tym więcej znaczników <BLOCKQUOTE>, co wprowadza w kodzie HTML pewien
zamęt. Lepsze efekty uzyskasz korzystając z tabel. W blogu znajdziesz omówienie
sposobów wyrównywania tekstu przy użyciu tabel.
Aby usunąć wcięcia, zaznacz tekst i kliknij ikonę wysunięcia, Text Outdent. Tekst powróci do
lewego marginesu dokumentu.
Definiując układ tekstu na stronie WWW wielu projektantów korzysta z kodu spacji, który nosi
nazwę miękkiej spacji i w HTML-u ma postać . Miękka spacja wprowadza dodatkowe
odstępy w tekście, które w świecie dokumentów drukowanych noszą nazwę interlinii (ang.
leading). W kodzie HTML nie ma znacznika umożliwiającego regulację odstępów między
wierszami. Pozostaje więc jedynie miękka spacja.
Istnieją także inne jej zastosowania. Miękka spacja jest na przykład bardzo przydatna w
definiowaniu układu strony. Aby ją wstawić w dokumencie, rozwiń menu Insert i zastosuj z menu
podrzędnego Special Characters polecenie Non-Breaking Space (lub skorzystaj ze skrótu
Ctrl+Shift+Spacja).
Pamiętaj, że nie wszystkie przeglądarki obsługują takie spacje.
Tagi: html, tekst
Kategoria: Tworzenie stron | Komentarze są wyłączone