Kurs HTML 4.0; część 3 - co można zrobić z tekstem
Po dość długiej przerwie wraca kurs HTML 4.0. Tak jak obiecałem w poprzednim odcinku (był w numerze 23) tym razem pokażę wam co można zrobić z tekstem. Jest to zdecydowanie najważniejsza część większości witryn internetowych, więc warto dokładnie zaprojektować jego (tekstu) wygląd. Do rzeczy...
Akapity i inne podobne im zwierzątka...
Każda przeglądarka, podobnie jak edytory tekstu automatycznie zawija wiersze tekstu tak, aby prezentowana przez nas treść mieściła się w oknie, w którym jest wyświetlana. Ma to swoje dobre i złe strony. Do zalet należy zaliczyć fakt, że nasz tekst zawsze będzie widoczny i nie trzeba będzie korzystać z paska przewijania poziomego, aby przeczytać go w całości (zdarzają się oczywiście wyjątki, przykładowo w poprzednim numerze składanym przez naczelnego tekst wychodził poza prawą krawędź ekranu. Sposób w jaki Mario osiągnął taki efekt nadal pozostaje dla mnie zagadką.:D) [mario by chętnie oświecił technicznego, ale też jeszcze nie odkrył jak udało mu się tego dokonać - przyp. mario]. Niewątpliwą wadą takiego rozwiązania jest konieczność stosowania specjalnych znaczników w celu podzielenia tekstu na akapity. Zwykłe wciśnięcie klawisza 'Enter' w celu przejścia do następnej linii zazwyczaj nic nie daje, gdyż większość przeglądarek i tak układa tekst wedle własnego uznania. Doskonale widać to na załączonym przykładzie:
Przykład:
...
<font size=2>Nie ma znaczenia, ile zrobię
odstępów, gdyż
przeglądarka wyświetli
tekst w jednej linii,
ignorując tym samym moje
podziały</font>
...Powyższy kawałek kodu w interpretacji twojej przeglądarki wygląda tak:
Nie ma znaczenia, ile zrobię odstępów, gdyż przeglądarka wyświetli tekst w jednej linii, ignorując tym samym moje podziały
W związku z tym konieczne jest stosowanie specjalnych znaczników, dzięki którym można zapanować nad rozkładem linijek w naszych dokumentach. Najprościej jest posługiwać się znacznikami <p> i <br>.
Znacznik <p>
Znacznikiem <p> oznacza się początek akapitu, podczas gdy </p> to teoretycznie jego koniec. Piszę teoretycznie, gdyż znacznik ten możemy spokojnie pominąć. Większość, jeżeli nie wszystkie obecnie używane przeglądarki automatycznie kończą dany akapit w momencie kiedy natrafią na kolejny znacznik <p>. Przecież nie można zacząć nowego akapitu nie kończąc poprzedniego, prawda?
Przykład:
<body>
Jak widać pierwszego akapitu nie trzeba definiować
<p>
To jest już drugi akapit, przeglądarka wyświetli go nieco poniżej poprzedniego.
<p>
To jest natomiast ostatni akapit - jak widać nie trzeba kończyć poprzedniego, aby zacząć nowy. Przeglądarka powinna zrobić to za nas.
</body>Oczywiście znacznik <p> ma znacznie większe możliwości niż to by mogło wynikać z powyższego przykładu. Dzięki licznej grupie możliwych atrybutów można osiągnąć różnorakie efekty.
Atrybuty znacznika <p>: ALIGN, CLASS, DIR, ID, LANG, ONCLICK, ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP, STYLE, TITLE.
ALIGN
możliwe wartości: left, right, center, justifyDomyślnie wszystkie przeglądarki wyrównują tekst do lewego marginesu. Aby to zmienić możemy posłużyć sie artybutem ALIGN. Dostępne są cztery sposoby wyrównania akapitu: left (do lewej), right (do prawej), center (wyśrodkowanie) i justify (do obu marginesów - tekst jest rozciągany aby równomiernie wypełniać kolejne linijki).
CLASS
Umożliwia nadanie akapitowi nazwy odwołującej się do wcześniej zdefiniowanej klasy znaczników <p>, która została zadeklarowana na poziomie dokumentu lub w odrębnym pliku z definicjami stylów. Dzięki atrybutowi CLASS można 'oznaczyć' wszystkie akapity o konkretnej zawartości (przykłady, cytaty itp.) w celu ich późniejszego przetwarzania. W ten sposób można uzyskać listę wszystkich przykładów/cytatów/czegokolwiekinnego z grupy dokumentów. Ciekawe, czy ktoś zrozumiał, o co chodzi :D.
DIR
możliwe wartości: rtl, ltrSens stosowania tego artybutu jest dość wątpliwy ze względu na fakt iż większość przeglądarek najzwyczajniej sobie z nim nie radzi. Teoretycznie informuje on przeglądarkę o kierunku wyświetlania tekstu. Możliwe są dwa ustawienia: rtl (right to left, czyli od prawej do lewej) i ltr (left to right, czyli od lewej do prawej). Jeżeli ciekawi Was, co Wasza przeglądarka robi z tym znacznikiem, to poniżej zamieszczam przykład, który pozwoli Wam to sprawdzić.
Przykład:
to jest tekst 'right to left'
a to jest tekst 'left to right'
ID
Atrybut ID umożliwia nadanie akapitowi etykiety, która może być potem wykorzystana przez odsyłacze, narzędzia do automatycznego przeszukiwania dokumentów i inne użyteczne narzędzia.
LANG
niektóre z możliwych wartości: fr, de, it, nl, el, es, pt, ar, he, ru, zh, ja, hi.Atrybut LANG informuje przeglądarkę, w jakim języku napisany jest tekst zawarty w danym akapicie. Podobnie jak artybut DIR, atrybut LANG jest raczej bezużyteczny.
ON*, czyli atrybuty obsługi zdarzeń
Atrybuty obsługi zdarzeń umożliwiają nam zaprogramowanie reakcji na działalność użytkownika (pojedyńcze kliknięcie, podwójne kliknięcie itd.). I tak możemy spowodować, aby podwójne kliknięcie na dany akapit otwierało nowe okno przeglądarki, czy coś w tym rodzaju. Możliwości są naprawdę duże, jednak należy dokładnie testować swoje 'twory' gdyż przeglądarki często mają problemy z obsługą takich 'fajerwerków'. Kiedyś będzie o tym cały odcinek kursu.
STYLE
Dzięki temu artybutowi można zdefiniować lokalny styl zawartości danego znacznika. Co to znaczy i jak to można wykorzystać praktyce dowiecie się za kilka(naście?) odcinków.
TITLE
Atrybut TITLE umożliwia dodanie krótkiego opisu, skojarzonego z danym akapitem.
Przykład:
<p title="tu należy wpisać opis">
Znacznik <br>
Jest to bardzo prosty w użyciu, a zarazem niezwykle przydatny znacznik. Jego działanie najłatwiej wytłumaczyć na przykładzie.
Przykład:
...
<p>To jest tekst pewnego akapitu. Aby spowodować przeniesienie reszty tekstu do następnej linijki posłużymy się znacznikiem zmiany wiersza<br>Dzięki niemu możemy zapanować nad rozkładem linijek w obrębie jednego akapitu
...Efekt:
To jest tekst pewnego akapitu. Aby spowodować przeniesienie reszty tekstu do następnej linijki posłużymy się znacznikiem zmiany wiersza
Dzięki niemu możemy zapanować nad rozkładem linijek w obrębie jednego akapituJak widać zastosowanie znacznika <br> nie tworzy charakterystycznych dla <p> odstępów między wierszami.
Nagłówki
Zakładam (mam nadzieję, że słusznie :D), że każdy z Was wie co to jest nagłówek [to taka mała czapka? - przyp. pingwin]. Patrząc na niektóre strony domowe doszedłem do wniosku, że wielu ludzi mimo iż wie czym są nagłówki i jak je wstawić do swoich stron, absolutnie nie ma pojęcia o tym, do czego te zwierzątka służą. W związku z tym tłumaczę: Nagłówki służą do wyodrębnienia wszelkiego rodzaju tytułów, które z kolei mają za zadanie ułatwić użytkownikowi orientację w zamieszczonym przez nas tekście. Nadmiar nagłówków powoduje zamieszanie w mózgu użytkownika.
HTML posiada sześć poziomów nagłówków, oznaczonych odpowiednio <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Poszczególne nagłówki wyglądają następująco:
Nagłówek H1
Nagłówek H2
Nagłówek H3
Nagłówek H4
Nagłówek H5
Nagłówek H6
To, jak będzie wyglądał dany nagłówek zależy w głównej mierze od ustawień przeglądarki, które każdy użytkownik może zmieniać wedle uznania. Jedynym przewidywalnym elementem charakteryzującym dany nagłówek jest jego rozmiar. Nagłówek H1 zawsze będzie duży, podczas gdy każdy kolejny (H2, H3...) będzie odpowiednio od niego mniejszy. Efekt widać powyżej.
Każdy nagłówek możemy dodatkowo 'skonfigurować' przy pomocy zestawu atrybutów. Są to dokładnie te same atrybuty, co w przypadku znacznika <p>, który był wcześniej omawiany, więc nie widzę sensu aby jeszcze raz je tutaj zamieszczać.
Czcionki, pogrubienia, kursywa itp.
Wbrew pozorom atrybutów definiujących wygląd czcionki jest dość sporo, bo aż dziewięć (pogrubienie, kursywa, stała szerokość znaków, podkreślenie, przekreślenie, zwiększenie, zmniejszenie, opuszczenie i uniesienie tekstu). Z tego co wiem Netscape nadal interpretuje migotanie tekstu (od tego można dostać epilepsji!). Warto już na wstępie zaznaczyć, że wszystkie znaczniki atrybutów czcionki muszą być zamykane, co jest dość logiczne, jako że z definicji mają za zadanie określać wygląd fragmentów tekstu (a nie wszystkiego, jak leci). Na wszelki wypadek dodam jeszcze, że wszystkie poniższe atrybuty można łączyć (pogrubiona kursywa itp.)
Pogrubienie - znacznik <b>
Zasadniczo znacznik ten służy do pogrubienia objętego nim tekstu, jeżeli jednak pogrubiona wersja używanej czcionki okaże się niedostępna, przeglądarka może zobrazować twoje intencje wedle własnego uznania (podkreślenie, zmiana koloru, czy coś w tym rodzaju). Problem ten pojawia się tylko w przypadku, kiedy wydziwiamy z doborem czcionki (z czcionkami takimi jak Tahoma, Verdana, Times New Roman, czy Courier New problem ten nie istnieje).
Zwiększenie - znacznik <big>
Rozmiar czcionki w HTML'u przyjmuje wartości od 1 do 7. Przy pomocy znacznika <big> możemy zwiększyć rozmiar objętego nim tekstu o 1. Jeżeli jednak czcionka już ma rozmiar 7 to użycie znacznika <big> niczego nie zmieni (7 to absolutne maksimum)
Zmniejszenie - znacznik <small>
Znacznik ten działa na podobnej zasadzie co znacznik <big>. Jedyną różnicą jest to, że <small> zmniejsza czcionkę
Kursywa - znacznik <i>
Znacznik ten mówi przeglądarce, że tekst nim objęty powinien zostać wyświetlony kursywą. Analogicznie do znacznika <b> - jeśli taka czcionka nie jest dostępna, to przeglądarka sama coś wymyśli (zmieni kolor, czy coś w tym rodzaju).
Przekreślenie - znacznik <strike>
Większość przeglądarek przekreśli tekst objęty tym znacznikiem. Jest to znacznik niezalecany, co znaczy że niedługo zostanie usunięty ze standardu HTML.
Przykład:
Ten tekst powinien być przekreślonyIndeks dolny - znacznik <sub>
Długo możnaby tłumaczyć co ten znacznik robi. Najłatwiej jest jednak pokazać efekt, jaki daje:
Przykład:
to jest tekst zwykły, a ten jest objęty znacznikiem <sub>
Indeks górny - znacznik <sup>
Znacznik ten działa podobnie do <sub>, różnica polega na tym, że <sup> podnosi tekst.
Przykład:
to jest tekst zwykły,a to jest tekst w obrębie znacznika <sup>
Stała szerokość znaków - znacznik <tt>
Znacznik ten mówi przeglądarce, że tekst nim objęty ma być wyświetlony przy użyciu czcionki o stałej szerokości znaków.
Podkreślenie - znacznik <u>
Dzięki temu znacznikowi możemy podkreślać tekst. Podobnie jak <strike> znacznik <u> nie jest zalecany i zostanie w najbliższym czasie usunięty ze standardu. Ponad to jego częste stosowanie może być mylące dla gości odwiedzających daną stronę (podkreślony tekst może być mylony z hyperlinkiem :D)
Epilepsja - znacznik <blink>- TYLKO NETSCAPE
Jeżeli chcesz dać posiadaczom Netscape'a coś extra to zafunduj im tekst objęty znacznikiem <blink>. Dasz im w ten sposób do zrozumienia, aby przesiedli się na IE :D (IE ignoruje znacznik <blink>).
Przykład:
Zmiana rozmiaru, koloru i innych takich
Za pewne dziwi Cię fakt, że tak podstawowe znaczniki są omawiane dopiero teraz. Już spieszę z wyjaśnieniem takiego stanu rzeczy. Otóż w pewnej bardzo mądrej książce wyczytałem, że W3C nie zaleca ich stosowania! W zamian mamy (przynajmniej w teorii) kożystać z CSS. Autorzy w.w. książki (ja zresztą również) szeczerze wątpią (może powinienem napisać wątpimy?) w to, że znaczniki te zostaną kiedykolwiek usunięte ze standardu. Wszystko jest jednak możliwe, więc jak coś, to nie mów że Cię nie ostrzegałem.
Dzikie filmy z rozmiarem czcionki
Niektórym ludziom (mam nadzieję, że się do nich nie zaliczasz) trudno jest pojąć jak to jest, że w HTML'u możemy określić rozmiar czcionki jako 1, 2, 3, 4, 5, 6 albo 7, a nie, jak ma to miejsce w edytorach tekstu, jako 11, 12 itp. itd. Oba systemy nijak mają się do siebie, a ich wzajemne przeliczanie nie ma większego sensu, gdyż przeglądarka interpretuje rozmiar czcionki zdefiniowany w HTML'u jako wirtualny. O co chodzi? Ano o to, że rzeczą niemal niemożliwą jest określić jakie rozmiary przyjmie tekst na ekranie, gdyż w większości przeglądarek można do woli zmieniać ustawienia związane z rozmiarem czcionki domyślnej (w Netscape 7 można 'zepsuć' dużo więcej :D). Co ma do rzeczy rozmiar czcionki domyślnej skoro mamy zamiar zdefiniować własny? Okazuje się, że bardzo dużo. Zamiast płodzić kolejne linijki tekstu pokażę wszystko ładnie przy pomocy tabelki:
size=1 - ta czcionka zawsze będzie 20% mniejsza niż size=2 size=2 - ta czcionka zawsze będzie 20% mniejsza niż size=3 size=3 - to jest czcionka o rozmiarze domyślnym, który może być zdefiniowany przez użytkownika size=4 - ta czcionka będzie zawsze o 20% większa niż size=3 size=5 - ta czcionka będzie zawsze o 20% większa niż size=4 size=6 - ta czcionka będzie zawsze o 20% większa niż size=5 size=7 - ta czcionka będzie zawsze o 20% większa niż size=6 Jeżeli takie tłumaczenie mimo wszystko wydaje ci się nie zrozumiałe to pokażę, jak to wygląda w praktyce:
to jest size = 1
to jest size = 2
to jest size = 3
to jest size = 4
to jest size = 5
to jest size = 6
to jest size = 7
Najważniejszy w tym wszystkim jest element ludzki. Wystarczy, że w ustawieniach przeglądarki zmienimy domyślny rozmiar czcionki na większy, a wizualizacje wszystkich dopuszczalnych rozmiarów czcionek też się zwiększą - czysta matematyka (btw.: ostatnio gdzieś wyczytałem, że większość Polaków nie potrafi poprawnie obliczać procentów :D). Liczę, że po tak obszernym tłumaczeniu problemu wszystko jest już jasne.
Znacznik <basefont> - niezalecany
Znacznik <basefont> pozwala określić bazowy wygląd tekstu (rozmiar(oczywiście wirtualny!), kolor, czcionka itp.), który przeglądarka ma lokalnie uważać za domyślny. Dopuszcza się stosowanie atrybutów: COLOR, FACE, ID, NAME i SIZE. Domknięcie znacznikiem </basefont> przywraca domyślne ustawienia przeglądarki.
Znacznik <font> - teoretycznie niezalecany
Znacznik ten służy do definiowania wyglądu niewielkich ilości tekstu (teoretycznie pojedyńczych paragrafów). Jeżeli chcesz zobaczyć przykład jego wykorzystania to obejżyj kod źródłowy tego artykułu - występuje tam zdecydowanie zbyt często :D.
W obrębie znacznika <font> dopuszcza się stosowanie następujących atrybutów: CLASS, COLOR, DIR, FACE, ID, LANG, SIZE, STYLE, TITLE. Poniżej opiszę tylko te najważniejsze.
atrybut SIZE
Przy pomocy tego artybutu możemy zdefiniować wirtualny rozmiar czcionki (wartość 1-7), lub lokalnie zwiększyć czcionkę (+/- 1-7). Na wszelki wypadek zobrazuję ten 'efekt':
to jest czcionka size=2, a to jest czcionka size=+1, podczas gdy to znowu jest size=2.
atrybut COLOR
Jak sama nazwa wskazuje - przy pomocy tego znacznika możemy zdefiniować kolor czcionki. Można to zrobic na dwa sposoby:
1. Zdefiniować wartość palety RGB przy pomocy sześciocyfrowej liczby szesnastkowej poprzedzonej znakiem #. W tym przypadku pierwsze dwie cyfry definiują zawartość koloru, czerwonego, druga para definiuje zawartość koloru zielonego, a trzecia niebieskiego. Przykładowo #FF0000 to kolor czerwony, #00FF00 to zielony, a #0000FF to niebieski. Stosując różne kombinacje można uzyskać najróżniejsze odcienie.
2. Wpisać angielską nazwę koloru (np.: green, albo red) jako wartość artybutu color. Nazwa może, ale nie musi być w cudzysłowiu. Standard HTML 4.0 obejmuje kolory: aqua (#00FFFF), black (#000000), blue (#0000FF), fuchsia (#FF00FF), gray (#808080), green (#008000), lime (#00FF00), maroon (#800000), navy (#000080), olive (#808000), purple (#800080), red (#FF0000), silver (#C0C0C0), teal (#008080), yellow (#FFFF00) i white (#FFFFFF). Większość przeglądarek poprawnie interpretuje znacznie więcej kolorów (ich pełną listę zamieszczę w następnym numerze).
atrybut FACE
Przy pomocy tego atrybutu możemy zdefiniować czcionkę jakiej ma użyć przeglądarka do wyświetlenia tekstu. Jeżeli podamy więcej niż jedną, to przeglądarka uzna ją za 'rozwiązanie awaryjne' i skorzysta z niej w przypadku, gdy pierwsza na liście czcionka będzie niedostępna. Takie rozwiązanie możesz podpatrzeć w kodzie tej strony.
Chaos lekko kontrolowany...
Mimo iż z założenia to przeglądarka ma definiować zawinięcie wierszy i interlinię istnieje możliwość częściowego zapanowania nad produkowanym przez nią chaosem. Jak się już pewnie domyślasz służy do tego kilka znaczników. <p> i <br> już znasz, więc pora na coś bardziej 'skomplikowanego'.
znacznik <nobr>
Dzięki temu znacznikowi możemy zdefiniować obszar 'niełamliwego' tekstu. Przeglądarka wyświetli go w jednej linii nawet jeśli będzie to oznaczało 'wyjście poza prawą krawędź okna'. Proste i skuteczne, choć pewnie nie będziesz z tego często korzystał.
znacznik <wbr>
To jeden z najciekawszych znaczników HTML w tym odcinku kursu. Są ku temu dwa powody: po pierwsze znacznik ten działa tylko wewnątrz znacznika <nobr>. Po drugie działa tylko jeśli zaistnieje taka potrzeba. Jego zadaniem jest powiedzieć przeglądarce, gdzie może złamać tekst znajdujący się w obrębie znacznika <nobr> jeśli ten nie mieści się w oknie przeglądarki i 'wychodzi z prawej strony'. Jeśli tekst mieści się w oknie, to przeglądarka nie złamie linii!
znacznik <pre>
Przy pomocy tego znacznika możemy zdefiniować obszar tekstu, który przeglądarka ma wyświetlić dokładnie tak, jak został wpisany w kodzie HTML. Przeglądarka nie zawija wierszy i nie ignoruje podwójnych spacji - całkowity brak formatowania. Wewnątrz znacznika <pre> nie wolno wstawiać znaczników definiujących podział na wiersze (nagłówki, paragrafy, łamanie linii itp. itd.), można za to wstawiać znaczniki logiczne, hiperłącza i obrazki.
znacznik <center>
Znacznik ten służy do centrowania tekstu. Operacja wyśrodkowania jest przeprowadzana po uprzednim zawinięciu wierszy przez przeglądarkę, więc efekty wcale nie muszą być zadowalające (przeglądarka nie dba o ostateczny wygląd tak sformatowanego tekstu).
znacznik <blockquote>
Dzięki temu znacznikowi możemy zwiększyć marginesy z obu stron. <blockquote> miał pierwotnie służyć do wyodrębniania wszelkiego rodzaju cytatów, ale lista jego praktycznych zastosowań jest znacznie dłuższa.
znacznik <q>
Tym znacznikiem powinniśmy (przynajmniej teoretycznie) oznaczać krótkie cytaty. Przeglądarki powinny (to jest również teoria) wyświetlać tak sformatowany tekst w cudzysłowiu. Jak jest w praktyce możesz sprawdzić sam - w poniższym przykładzie wykorzystałem znacznik <q>.
Przykład:
Jeśli ten tekst jest w cudzysłowiu, to twoja przeglądarka jest z 'tych lepszych'Linki & adresy e-mail.
znacznik <adress>
Znacznik ten mówi przeglądarce, że tekst w nim zawarty zawiera namiary na kogoś (adres e-mail, adres www...). Przeglądarka wyświetla taki tekst w specjalny sposób (jaki specjalny to już zależy od niej :D).
Właściwe linki (hiperłącza) robi się jednak innaczej.
na początek zwykły link do naszej strony:
<a href="http://www.pro.home.pl">PRO - Magazyn Prawdziwych Internautów</a>
powyższy kod daje taki efekt:
PRO - Magazyn Prawdziwych Internautów
a teraz adres e-mail:
<a href="mailto:madzio@life.pl>madzio</a>
co daje:
Mam nadzieję, że wszyscy zrozumieli co i jak.
Podsumowanie
To już wszystko, co chciałem Wam przekazać w tym odcinku kursu. Nie wyczerpałem wprawdzie tematu, ale myślę że to co 'zademonstrowałem' w zupełności wystarczy. Jeśli mimo wszystko jesteście nadal żądni wiedzy to piszcie - postaram się pomóc.
madzio
madzio@life.pl