PROJEKTOWANIE STRON WWW

Transkrypt

1 PROJEKTOWANIE STRON WWW Pierwszy protokół umożliwiający połączenie się komputerów w WWW (World Wide Web) wg określonego adresu IP karty sieciowej komputera był protokół TCP/IP. W dzisiejszych czasach jest dostępnych wiele narzędzi, technologii i języków skryptowych do projektowania stron WWW wykorzystujące protokół HTTP (Hypertext Transfer Protocol) umożliwiający komunikację między serwerami WWW i przeglądarkami WWW, tj.: HTML (Hypertext Markup Language) XHTML (jako jeden z wielu języków znaczników z rodziny XMLa) style: Strict (ścisły) i Transitional (przejściowy) DHTML (Dynamic HTML: połączenie XHTMLa z arkuszami stylów pozwalający tworzyć strony o bardziej interaktywnych charakterze) PHP Java Script, Java Silniki bazodanowe: MySQL, PostgreSQL, MS SQL,... Style kaskadowe: CCS Skrypty umożliwiające przetwarzanie formularzy: CGI Perl Flash XML (extensible Markup Language) model wyjściowy dla wielu innych języków znaczników Oprócz tego istnieją również protokoły zaprojektowane do transferu plików FTP (File Transfer Protocol), do przesyłania wiadomości poczty elektronicznej Post Office Protocol, Simple Mail Transfer Protocol itd. Witryny oferujące funkcję automatycznych tłumaczeń: Edytory języka HTML i innych języków skryptowych mogą być 2-jakiego charakteru: WYSIWYG (What you see is what you get) to co widzisz, jest tym, co otrzymujesz umożliwiają edycję strony w trybie graficznym Edytory kodu źródłowego Umieszczanie plików na serwerze WWW za pomocą klientów FTP: WinSCP3 Total Commander 1

2 PLAN WYKŁADU 1: 1. Wprowadzenie 2. Sposób budowy skryptu HTML 3. Znaczniki HTML 4. Łącza hipertekstowe, adresy bezwzględne i względne URL, odsyłacze (linki) do stron, do adresu poczty elektronicznej, do serwera ftp Tabele i rozmieszczenie elementów na stronie 6. Ramki i otwieranie stron w nowych (_blank) oknach (target) lub innych oknach dokumentu opartego o ramki 7. Menu 8. Elementy graficzne i multimedialne 9. Formularze 10. Pozycjonowanie stron w Internecie 1. Projektowanie stron z wykorzystaniem HTMLa Literatura uzupełniająca: 1. Todd Stauffer, Kurs tworzenia stron internetowych, Helion, Gliwice, 2002, 2. David Crowder, Rhonda Crowder, Tworzenie stron WWW, Helion, Gliwice, Kursy dostępne w Internecie: Google: kurs HTML World Wide Web Consortium odpowiedzialne za tworzenie specyfikacji i standardów HTML był pierwszym ogólnodostępnym zbiorem standardowych kodów i zasad zaprojektowanych do tworzenia stron i formatowania tekstu wyświetlanego w przeglądarkach WWW. Za pomocą HTMLa można utworzyć najprostsze (nieinteraktywne i niedynamiczne) strony WWW, które będą zawierały sformatowany tekst i polecenia wskazujące przeglądarce, że powinna załadować i w określony sposób przedstawić umieszczone na tej stronie elementy multimedialne (filmy, dźwięki i animacje). Jedną z najważniejszych zalet stosowania HTML (i innych języków skryptowych) jest obsługa połączeń hipertekstowych umożliwiających łatwą nawigację po interesujących treściach stron WWW poprzez kliknięcie myszką na takim odsyłaczu (odnośniku, łączu, linku) określanych za pomocą adresów sieci WWW zwanych URLami (Uniform Resource Locator), które pozwalają jednoznacznie zidentyfikować i załadować przez przeglądarkę WWW każdą widoczną (opublikowaną, dostępną za pośrednictwem jakiego serwera) w sieci stronę WWW. W URLu mogą być zdefiniowane różne rodzaje protokołów: Serwerów WWW Bezpiecznych serwerów WWW przez protokół szyfrujący SSL file://... Dokumentów umieszczonych lokalnie na dysku twardym komputera ftp://... Plików i serwerów FTP gopher://... Menu i dokumentów Gopher 2

3 news://... Serwera grupy dyskusyjnej Usenetu news: Określonej grupy dyskusyjnej Usenetu mailto: Stworzenia wiadomości poczty elektronicznej zaadresowanej do konkretnego odbiorcy telnet: zdalnego serwera Telnet Edytor HTML Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając tzw. znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa. Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń, w szczególności: Pajączek, Zajączek, Teger, HotDog, HomeSite, WebEdit, WebDesign, EdHTML... Osnowa dokumentu Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem <H1>treść tytułu</h1>. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi literami są interpretowane w ten sam sposób. Staranniej wykonane edytory HTML pozwalają nawet zdefiniować, czy polecenia HTML będą wpisywane małymi, czy wielkimi literami. Wszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń: Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami <BODY> </BODY>. Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE>. Zaleca się stosowanie strony kodowej ISO (czyli ISO Latin 2), gdyż jest to międzynarodowy standard, a "przy okazji" także polska norma umożliwiająca prawidłowe wyświetlanie polskich znaków. Powinieneś sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. <meta http-equiv="content-type" content="text/html; charset=iso "> Standardowa szablon dokumentu w HTMLa: <HTML> <HEAD> <TITLE>Tytuł strony</title> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML> 3

4 Kolor tła dokumentu: Jeśli nie zdefiniujemy koloru tła, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary): <BODY BGCOLOR="kolor"> przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Najlepiej stosować wartości heksadecymalne, jako bardziej uniwersalne. Tytuły W dokumentach często wprowadzamy różnego rodzaju tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające jedynie znacznik otwierający. Akapit i wiersz Zwykły tekst możemy rozdzielić na akapity stosując polecenie <P> (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Należy konsekwentnie stosować znacznik zamykający </P>. Przykład: <P>To jest treść pierwszego akapitu</p> <P>To jest treść drugiego akapitu</p> Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Możemy wówczas zastosować pojedyncze polecenie <BR> (BR break), które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. To jest pierwszy wiersz<br> To jest drugi wiersz<br> To jest trzeci wiersz<br> To jest czwarty wiersz<br> Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami. Pozioma linia Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest bardziej przejrzysta. Listy numerowane i wypunktowane Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia <LI> <P>Dlaczego zajmuję się UFO?</P> <UL> <LI>Uważam, że UFO istnieje</li> <LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</li> 4

5 <LI>Uważam, że należy się przygotować na spotkanie</li> </UL> W efekcie uzyskamy: Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie Gdy chcemy utworzyć wykaz numerowany, wówczas stosujemy <OL> i </OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich (w dalszej części podręcznika pokażemy inne sposoby numerowania). 1. Uważam, że UFO istnieje 2. Uważam, że pozaziemskie cywilizacje mogą nam pomóc 3. Uważam, że należy się przygotować na spotkanie Atrybuty czcionki Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty czcionki - pogrubienie (Bold), pochylenie (Italic) i podkreślenie (Underlined). Atrybuty pozwalają uwypuklić jakieś fragmenty tekstu, np. nazwy za pomocą kursywy, a ważniejsze pojęcia za pomocą pogrubienia: To jest tekst normalny <B>To jest tekst pogrubiony (bold)</b> <I>To jest tekst pochylony (italic, kursywa)</i> <U>To jest tekst podkreślony (underlined)</u> Efekt działania tych poleceń: To jest tekst normalny To jest tekst pogrubiony To jest tekst pochylony To jest tekst podkreślony Odsyłacze Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do innych stron, które znajdują się w światowej sieci. W gruncie rzeczy czytelnik dokumentu nie musi wcale wiedzieć, gdzie znajdują się te strony - ważne jest, aby miał do nich łatwy dostęp. Na tym polega istota hipertekstu - jakiś temat może być opisany za pomocą stron tworzonych przez różnych autorów, mieszkających w różnych krajach, nawet często nie znających się wzajemnie. Gdy na zbudowanych przez nich stronach znajdą się odsyłacze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który uczyni te strony jedną całością. Czytelnik jakiegoś dokumentu będzie po prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy dostęp do informacji. 1. Odsyłacz do innej strony jest tworzony za pomocą polecenia: <A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</a> Przykładowy adres mógłby wyglądać następująco: <A HREF=" czyli, 5

6 PCkurier Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie index.html (lub index.htm - zależy to od typu serwera WWW). Uwaga: zaleca się nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A HREF="... "> i </A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim spowoduje skok do strony. Adres internetowy jest podawany w cudzysłowie. Pobieranie pliku za pomocą protokołu HTML: <A HREF=" plik</a> 2. Odsyłacz do serwera FTP umożliwiającego kopiowanie wielu plików: <A HREF="ftp://ftp.adres">Serwer FTP</A> 3. Odsyłacz do adresu poczty elektronicznej umożliwia czytelnikowi np. łatwy kontakt z autorem strony. Stosujemy tutaj na przykład następujące polecenie: <A HREF="mailto:autor@jego.adres">Imię i nazwisko</a> Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. 4. Odsyłacz do serwerów Telnet umożliwiają łatwe zalogowanie się użytkownikowi bezpośrednio na zdalnym komputerze: <A HREF="telnet:// adres">zaloguj się na serwerze naszej firmy</a> Automatyczne ładowanie stron WWW (client-pull) Umożliwia załadowanie strony po określonym czasie w sekundach bez jakiejkolwiek czynności ze strony użytkownika: <meta http-eqiv= refresh content= secundy ; url= nowy_url /> Wielkość czcionki Podstawowa czcionka ma wielkość 3 jednostek (nie mylić z wielkością w punktach typograficznych) i jest zazwyczaj wyświetlana w przeglądarkach WWW jako czcionka 10- lub 12-punktowa. Przeglądarki pozwalają na ogół zdefiniować, jaka wartość punktowa odpowiada czcionce o wielkości 3. W dokumencie możemy stosować czcionkę o wielkości od 1 do 7. Im większa wartość, tym większa czcionka w przeglądarce. Uwaga: Wielkości czcionki w przeglądarce WWW nie należy utożsamiać z wielkością czcionki, za pomocą której redagujemy tekst w edytorze HTML! Czcionka w edytorze nie ma żadnego znaczenia dla postaci strony WWW. Możemy na przykład posługiwać się czcionką System, a i tak w przeglądarce pojawią się czcionki, które definiuje sam dokument lub przeglądarka. Polecenie, które określa wielkość czcionki, ma następującą postać: <FONT SIZE="x">Tekst objęty definicją</font> gdzie x = Gdy w taki właśnie sposób definiujemy wielkość czcionki, nadajemy jej wartość absolutną. Możemy jednak także nadać wartość relatywną, czyli względną, podając wielkość zmiany. Skoro czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 6

7 jednostki lub odjąć co najwyżej 2. Gdyby czcionka podstawowa miała wielkość 1, moglibyśmy dodać 6, ale już niczego nie moglibyśmy odejmować. <FONT SIZE="+x">Tekst objęty definicją </FONT> <FONT SIZE="-x">Tekst objęty definicją </FONT> gdzie x = Gdy jakiś fragment tekstu obejmiemy definicją <FONT SIZE=+2> </FONT>, będzie on miał wielkość 5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia <FONT SIZE=-1> </FONT>, tekst będzie miał wielkość 2. W ten sposób możemy manipulować wysokością czcionki w tekście, uwypuklając jakieś fragmenty. Jest to wygodne, gdyż możemy zmienić wielkość czcionki wewnątrz akapitu, do czego nie nadaje się definicja tytułu. Kolor czcionki Kolor czcionki możemy zmienić poleceniem: <FONT COLOR="kolor">Tekst objęty poleceniem</font> Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości szesnastkowych (np. kolor biały ma wartość #FFFFFF, a czarny #000000), albo za pomocą ich nazw. Wszystkie popularne przeglądarki akceptują wartości heksadecymalne (w formacie RRGGBB, gdzie RR - składowa czerwona, GG - składowa zielona, BB - składowa niebieska), aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML. Oto lista szesnastu podstawowych 16 barw: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Grafika na stronie Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony. Na szczęście za następnym razem przeglądarka sięga do katalogu cache, gdzie gromadzą się grafiki z Internetu, co znacznie przyspieszy transmisję zawartości strony. Niemniej jednak warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie niosą żadnych istotnych treści. Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych - GIF i JPG (JPEG) - które są z założenia skompresowane (często nawet dziesięciokrotnie w stosunku do innych popularnych formatów), a więc zajmują znacznie mniej miejsca grafiki w innych formatach. Dzięki temu transmisja strony trwa znacznie krócej. Grafikę możemy wprowadzić za pomocą polecenia: <IMG SRC="nazwa_pliku"> W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument, wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu, konieczne jest podanie ścieżki dostępu. Na przykład: <IMG SRC="../gambler/gambler.gif"> Umieszczenie strony na serwerze WWW Następnie można wystawić swoją stronę w Internecie. W tym celu trzeba sobie zapewnić miejsce na jakimś serwerze. Można wykupić kilka megabajtów miejsca u dowolnego dostawcy usług internetowych, ale to oczywiście kosztuje nieco grosza. Można także 7

8 skorzystać z jakiejś darmowej oferty. Jeśli nie zapewnia Ci miejsca na serwerze Twój pracodawca, szkoła czy uczelnia, można skorzystać z bezpłatnej oferty różnych firm, np. Polbox, KKI, Friko: Polecenie definiuje bazowy adres dokumentu. <BASE HREF=" Polecenie w tej postaci zapewnia poprawność relatywnych odsyłaczy w dokumencie. Niekiedy dokumenty są przenoszone do innych miejsc, gdy wymaga tego porządek na serwerze. Jednak w dokumentach znajdują się zazwyczaj relatywne odsyłacze do innych stron na serwerze, a nie odsyłacze absolutne. Oznacza to, że nie jest w nich podawana pełna ścieżka dostępu, lecz jedynie jej fragmenty. Jest to znacznie wygodniejsze w trakcie konstruowania dokumentu. Gdy dokument zostanie przeniesiony, może się zdarzyć, że odsyłacze stracą swoją aktualność, gdyż przeglądarka będzie je odnosić do nowego położenia dokumentu. Oczywiście poprawność wymagałaby w takiej sytuacji albo przeniesienia wszystkich dokumentów, do których odsyłacze znajdują się na danej stronie, albo ręcznego poprawienia adresów. Jedno i drugie może być bardzo kłopotliwe, a przeniesienie nawet z jakichś powodów niemożliwe. W takiej sytuacji wygodnym rozwiązaniem jest podanie <BASE> w nagłówku przenoszonej strony. Przeglądarka będzie automatycznie, "w locie" poprawiać adres w odsyłaczu, kierując się podanym adresem bazowym, który stanowi w tej sytuacji swoistą busolę. Parametry BODY Definiując <BODY> możemy wstawić dodatkowo kilka parametrów, które zadecydują o graficznej postaci strony: <BODY BACKGROUND="URL albo ścieżka/nazwa_pliku.gif"> Parametr BACKGROUND="obrazek.gif" pozwala wybrać obrazek, który pokaże się w tle dokumentu w przeglądarce. (najlepiej, żeby się znajdował w tym samym katalogu, co strona HTML). <BODY BGCOLOR="kolor"> Parametr BGCOLOR="kolor" pozwala wybrać kolor tła dokumentu, który pokaże się w tle dokumentu w przeglądarce. Gdyby był to <BODY BGCOLOR="yellow">, zobaczymy: Uwaga: należy deklarować kolor tła strony, gdyż jeśli tego nie zrobimy, czytelnik strony zobaczy tło zależne od jego własnych ustawień w przeglądarce, białe, szare czy jakiekolwiek inne. Może to "zrujnować" wyświetlanie strony. Ponadto, gdy używamy pliku graficznego jako tła, także podawajmy alternatywny kolor tła strony, gdyż wiele osób wyłącza grafikę w przeglądarce - wtedy widoczny jest jedynie kolor tła strony. <BODY TEXT="kolor"> Parametr TEXT="kolor" pozwala określić kolor tekstu w dokumencie. Wybierając kolor, należy mieć także na uwadze kolor tła. Możemy również określić kolory odsyłaczy: <BODY LINK="kolor1" VLINK="kolor2" ALINK="kolor3"> LINK="kolor" określa standardowy kolor odsyłacza. VLINK="kolor" (visited link) określa kolor odsyłacza, który został co najmniej raz użyty (zauważmy związek z ustawieniem przeglądarki u odbiorcy, który może na ogół swobodnie definiować czas "wygasania" informacji o wizytowaniu jakiegoś miejsca w Internecie). ALINK="kolor" (active link) określa kolor aktywnego odsyłacza. Odsyłacz aktywny to odsyłacz w trakcie ładowania dowiązanego do niego dokumentu. Jeśli np. odsyłacz ma standardowo kolor niebieski, w momencie przywoływania dowiązanego dokumentu zmieni na chwilę swój kolor (właśnie zdefiniowany za pomocą ALINK="kolor"), natomiast gdy powrócimy do tej samej strony, 8

9 zobaczymy, że odsyłacz ma już kolor zdefiniowany za pomocą VLINK="kolor", jako już co najmniej raz wizytowany. Możemy przykładowo użyć kolorów: <BODY LINK="blue" VLINK="red" ALINK="yellow"> Margines lewy strony: <BODY LEFTMARGIN="xx"> Wartość LEFTMARGIN="xx" spowoduje przesunięcie zawartości dokumentu o xx pikseli w prawo. Margines górny strony: <BODY TOPMARGIN="xx"> Wartość TOPMARGIN="yy" spowoduje przesunięcie zawartości dokumentu o yy pikseli w dół. Oba polecenia nie wchodzą w zakres standardu HTML 4.0. Czcionka pogrubiona <B> </B> Przykład: To jest czcionka pogrubiona (bold) Czcionka pochylona <I> </I> Przykład: To jest czcionka pochylona (italic) Czcionka migająca <BLINK> </BLINK> Czcionka podkreślona <U> </U> Przykład: To jest czcionka podkreślona (underline) Czcionka o stałej szerokości znaku <TT> </TT> Przykład: To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype) Czcionka przekreślona <STRIKE> </STRIKE> Przykład: Czcionka przekreślona Alternatywnie jest używane równoważne polecenie <S></S>:. Oba polecenia istnieją w specyfikacji HTML 4 i są w dalszym ciągu interpretowane przez przeglądarki, ale autorzy specyfikacji zalecają ich stopniowe zastępowanie przez nowsze konstrukcje języka. Superskrypt (indeks górny) <SUP> </SUP> Przykład: 9

10 Czcionka z superskryptem Subskrypt (indeks dolny) <SUB> </SUB> Przykład: Czcionka z subskryptem Duża czcionka (+1 punkt) <BIG> </BIG> Przykład: Duża czcionka Mała czcionka (-1 punkt) <SMALL> </SMALL> Przykład: Mała czcionka Znaczniki logiczne - style Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu. Cytat blokowy <CITE> </CITE> Przykład: To jest cytat (citation) Definicja <DFN> </DFN> <DFN>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Element usunięty Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem <DEL>, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.: <del>dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.</del> Element wstawiony Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS. <ins>to jest nowe opracowanie tematu.</ins> To jest nowe opracowanie tematu Skrót i akronim Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów. <ABBR lang="pl">prof.</abbr> <ACRONYM lang="en">www</acronym> 10

11 Czcionka mocno wyróżniona <STRONG> </STRONG> Przykład: To jest czcionka mocno wyróżniona (strong) Czcionka wyróżniona (emfaza) <EM> </EM> Przykład: To jest czcionka wyróżniona (emphasis) Kod (tekst programu) <CODE> </CODE> Przykład: To jest kod (code) Czcionka wprowadzana z klawiatury <KBD> </KBD> Przykład: Czcionka z klawiatury Przykład <SAMP> </SAMP> Przykład: Przykład (sample) Zmienna (słowo kluczowe języka) <VAR> </VAR> Przykład: Zmienna (variable) Kolory czcionki Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru: <FONT COLOR="nazwa_koloru"> </FONT> Wielkość czcionki Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników: <FONT SIZE="xx"> </FONT>. Czcionka bazowa Czcionka ma domyślną wielkość 3, ale w dowolnym momencie możemy ją zmienić za pomocą polecenia: <BASEFONT SIZE="x"> Oznacza ono, że od tego momentu czcionka podstawowa będzie miała wielkość x, a wszystkie zmiany będą się odnosiły do tej wielkości. Gdy x=5, <BIG> wprowadzi czcionkę o wielkości 6, <SMALL> - o wielkości 4, <FONT SIZE=-3> zmniejszy czcionkę do 2 punktów itd. 11

12 Uwaga: polecenie BASEFONT jest uznane za niepożądane i zalecane jest rezygnowanie z niego w dokumentach. Zmiana kroju czcionki Zmianę kroju czcionki dokonujemy za pomocą: <FONT FACE="nazwa_kroju"> </FONT> Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym), np. <FONT FACE="Arial CE", Arial, Helvetica> Uwaga: polecenie FONT FACE nie jest zalecanym poleceniem HTML i sugeruje się rezygnowanie z niego na rzecz stylów. GRAFIKA I MULTIMEDIA Uwagi ogólne Grafika i inne elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ubarwiając i uprzyjemniając pracę w Sieci, ale także dostarczając sporej dawki informacji. Zręczne wykorzystywanie grafiki czy dźwięku podczas tworzenia dokumentu internetowego jest umiejętnością niezmiernie przydatną, choć należy pamiętać, że to właśnie te elementy są główną przyczyną ogromnego wzrostu ruchu w sieci i zatykania się łącz. Konieczne jest zatem wybranie złotego środka między estetyką i nośnością informacyjną grafiki z jednej, a twardymi realiami technicznymi z drugiej strony. Pamiętajmy też, że trzeba zachować należny umiar ze względu na estetykę strony - nadmiar multimediów po prostu razi. Autorzy regularnie odwiedzanych stron (zawierających stałe aktualizacje) mogą jednak liczyć na fakt, że dobrze skonstruowane przeglądarki pozwalają wykorzystywać cache, który gromadzi (jednorazowo) elementy graficzne i dźwiękowe, pozwalając przeglądarce sięgać do zasobów na dysku lokalnym, a nie do Sieci, co wydatnie zmniejsza ruch na łączach. Z tego też powodu w Internecie zostały przyjęte dwa podstawowe standardy graficzne - GIF i JPG - które charakteryzują się znaczną kompresją, a tym samym relatywnie niewielkimi rozmiarami plików graficznych. Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny"> IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (źródło). Jeśli nie stosujemy żadnych dodatkowych parametrów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu parametrów, które zmienią położenie, wielkość i inne cechy obrazka. Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: <IMG SRC="tucows.gif" HEIGHT=150> <IMG SRC="tucows.gif" WIDTH=200> Możemy również zdeformować obrazek, podając arbitralne wartości wysokości i szerokości obrazka: <IMG SRC="tucows.gif" WIDTH=200 HEIGHT=50> Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy o malejącej rozdzielczości obrazka na ekranie przeglądarki. 12

13 Parametr BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli: <IMG SRC="tucows.gif" WIDTH=120 HEIGHT=160 BORDER=5> Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu: <IMG SRC="tucows.gif" HSPACE=50> <IMG SRC="tucows.gif" VSPACE=50> Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu: <IMG SRC="obrazek" ALIGN=abc> gdzie ALIGN=left ALIGN=right ALIGN=top ALIGN=bottom ALIGN=middle Jeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym lub osoby niewidome wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony (przeczytany) na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron. Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami <CENTER></CENTER> Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD></TD>. Animacja Marquee Uwaga: Animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0. Odradza się jej stosowanie na stronach WWW, choć może ona bardzo dobrze spełniać swoją rolę w archiwach elektronicznych HTML Help, które są oparte właśnie na Internet Explorerze, czy też w firmowych intranetach, w których standardową przeglądarką jest produkt Microsoftu. Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions. Jest to "pływający" w poprzek ekranu napis. Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</marquee>. Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>: Tekst może się poruszać na trzy sposoby: BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua. Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo. Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu. Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy. 13

14 Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu. Tekst pod animacją Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>. Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE. Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej. Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy. Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami = 1 sekunda. Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją: Przykładowe programy do tworzenia animacji: Unlead GIF Animator Animagic GIF Animator GifBuilder VSE Animation Maker Flash CoffeCup Firestarter Utworzyć film w formacie QuickTime lub Windows Media, Windows Movie Maker Publikacje elektroniczne w formacie Adobe PDF W ostatnich latach ostatecznie wykrystalizował się niekwestionowany standard w kategorii publikacji elektronicznych - jest nim Adobe Portable Document Format (lub Portable Digital Format), znany pod popularnym skrótem PDF. Dokumentacja w formacie PDF jest bardzo rozpowszechniona na świecie i jest ogólnie przyjętym standardem w firmach, biurach czy na uczelniach. PDF współpracuje bezpośrednio z dokumentami w formacie HTML i możliwe jest użycie dość skomplikowanych sposobów wbudowania PDF, łącznie z zastosowaniem skryptów (zainteresowanym Czytelnikom polecamy tutaj dostępną w Polsce książkę Thomasa Merza, "Web Publishing with Acrobat PDF"). Na codzienne potrzeby można się jednak ograniczyć do trzech bardzo prostych metod. Należy jednak pamiętać, że czytelnik naszej strony musi dysponować Acrobat Readerem - jest to akurat jedyny składnik rozbudowanego oprogramowania PDF, który Adobe dostarcza za darmo (jeszcze kilka lat temu nawet za Readera trzeba było płacić). Pierwszy sposób polega na bezpośrednim odwołaniu się do dokumentu PDF w dokumencie HTML, np. <a href= licence.pdf >kliknij tutaj</a> Dokument PDF ukazuje się bezpośrednio w przeglądarce i jest opatrzony narzędziami nawigacyjno-zarządzającymi Acrobat Readera. Dźwięk, wideo, VRML 14

15 Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek, co ciekawe, dokumentacja HTML 4 właściwie milczy na temat dźwięku! Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady: Plik dźwiękowy WAV (styl Netscape): <embed src="../wav/complete.wav" border=0 width=x height=y> Plik dźwiękowy WAV (styl Microsoft: <bgsound src="../wav/complete.wav" loop=infinite> Plik dźwiękowy MIDI (styl Netscape): <embed src="../midi/airwolf.mid" border=0> gdzie: loop=x określa liczbę powtórzeń dźwięku width=x height=y określa rozmiary wyświetlanego obrazka autostart=true false nakazuje lub zakazuje automatycznego startu odtwarzania hidden=true false nakazuje schować wyświetlić obrazek wtyczki palette=foreground background pozwala uniknąć ewentualnego migotania palety kolorów, gdy przeglądarka pracuje w trybie 256 kolorów pluginspace="url" wskazuje miejsce, gdzie znajduje się wtyczka, jeśli użytkownik jej jeszcze nie zainstalował. Adres ten powinien być zgodny ze wskazaniami producenta wtyczki. Użycie hidden=true pozwala symulować dźwięk w tle (podobnie jak w przypadku BGSOUND dla IE). Jest to rozwiązanie uniwersalne dla obu czołowych przeglądarek Zaleca się wtedy umieszczenie polecenia EMBED na samym końcu dokumentu, gdyż wtedy wcześniej wczyta się tekstowa zawartość strony. Starsze przeglądarki, które nie akceptują polecenia EMBED, mogą zobaczyć polecenie NOEMBED: <EMBED SRC="plik.mid" WIDTH="200" HEIGHT="150"> <NOEMBED>Potrzebujesz Navigatora lub Internet Explorera aby to usłyszeć</noembed> </EMBED> Polecenie EMBED sprawia trochę kłopotów, jeśli chodzi o wielkość wyświetlanego panelu. Każda z wtyczek jest wyświetlana najlepiej w sobie tylko należnych wymiarach, więc podanie 145x60, co miałoby honorować LiveAudio, spowoduje, że wtyczka Crescendo albo Windows Media Player będą wyświetlane "kulawo". Problem polega na tym, że nie wiemy, jakim programem dysponuje czytelnik naszej strony, choć możemy założyć z dużą dozą pewności, że posiadacze Internet Explorera (jakieś trzy czwarte internetowej populacji w Polsce) korzystają głównie z Windows Media Playera, a właściciele Navigatora, zwykle z LiveAudio. Oczywiście może się zdarzyć, że jakiś popularny odtwarzacz dźwiękowy, np. WinAmp, przejmuje domyślnie obsługę plików MIDI, zabierając je LiveAudio i Media Playerowi. Gdybyśmy zrezygnowali z podawania wymiarów, jedynie Windows Media Player poprawnie wyświetli podstawową wersję panelu, natomiast inne wtyczki przyjmą rozmiary nie bardzo zgodne z właściwymi. Wszystko to powoduje, że webmaster staje przed problemem czysto estetycznym, choć takie brzydko wyglądające panele także jakoś tam spełniają swoje zadanie, zwłaszcza że pod lewym lub prawym klawiszem myszki widnieją polecenia wtyczki. Plik dźwiękowy MIDI (styl Microsoft): <bgsound src="../midi/antartic.mid" loop=1> loop=x oznacza liczbę powtórzeń. Loop=infinite nakazuje powtarzać dźwięk bez końca. balance=x (x=-10000;10000) określa równowagę między głośnikami w przypadku 15

16 dźwięku stereofonicznego volume=x (x=-10000;0) wyznacza głośność. Wartość tę należy samodzielnie wypraktykować. Jedynie Internet Explorer obsługuje konstrukcję BGSOUND. Navigator ignoruje ją i "milczy". Z kolei polecenie EMBED jest obsługiwane przez obie przeglądarki - Navigator obsługuje zagnieżdżony w ten sposób plik dźwiękowy przez wtyczkę (standardowo jest to LiveAudio), natomiast Internet Explorer korzysta z instalowanego razem z przeglądarką Windows Media Playera. Obie przeglądarki mogą także korzystać z innych wtyczek - dość popularny jest program Cresendo, istniejący w wersjach ActiveX dla IE i wtyczki dla Navigatora ( ale istnieją też inne wtyczki, np. WebTracks, firmy WildCat Software ( WebTracks obsługuje pliki MIDI, ale w pierwszym rzędzie swój własny format WTX. Interesującym rozwiązaniem jest wtyczka Beatnik, firmy Headspace, która obsługuje format RMF, czyli Rich Music Format (proszę zauważyć podobieństwo do RTF - Rich Text Format). Jest to zaawansowana technika, pozwalająca uzyskać bardzo bogate brzemienie, przy niewielkiej objętości pliku. Jest to ciągle jednak mało popularna technika. Przykładowe polecenie zagnieżdżające plik RMF może wyglądać następująco: <EMBED SRC="affectio.rmf" TYPE="audio/rmf" WIDTH=144 HEIGHT=60 DISPLAY=SONG MODE=SCOPE AUTOSTART=TRUE LOOP=FALSE VOLUME=100> Plik wideo AVI (styl Netscape) - <embed src="../dragdrop.avi" border=0> Plik wideo AVI (styl Microsoft) - <img border=0 alt=" " dynsrc="../dragdrop.avi" loop=infinite start=fileopen> dynsrc=url podaje adres pliku AVI loop=x określa liczbę powtórzeń, loop=infinite oznacza powtarzanie bez końca loopdelay=n określa w milisekundach opóźnienie między kolejnymi powtórzeniami start=fileopen mouseover wskazuje, czy plik AVI jest odtwarzany po wczytaniu strony czy po przesunięciu kursora nad ikonę odtwarzacza controls wyświetla panel kontrolny odtwarzacza AVI Uwaga: styl Microsoftu nie jest zalecany. Plik VRML (styl Netscape) <EMBED SRC="vrlm.wrl" WIDTH="200" HEIGHT="150"> Pliki VRML jest obsługiwany przez wtyczki, np. Live3D lub CosmoPlayer dla Netscape'a albo ActiveVRML dla Internet Explorera. Plik RealAudio Na stronie możemy też umieścić plik RealAudio. Pliki takie można sporządzić za pomocą popularnego programu do obróbki dźwięku, CoolEdit, albo za pomocą oryginalnego RealAudio Encoder, dostępnego za darmo na stronie Real Networks. Program przetwarza na format RA pliki zapisane w formacie WAV. Do tworzenia plików RA najlepszy jest darmowy RealProducer G2, dostępny na stronie RealNetworks. Wystarczy umieścić na stronie bezpośredni odsyłacz do pliku RA, np. <a href=plik.ra>kliknij tutaj</a> Innym, wygodnym sposobem umieszczenia pliku RA na stronie jest użycie polecenia EMBED, np.: <embed src="plik.ra" height=105 width=275 autostart=true type=audio/x-pnrealaudio-plugin> 16

17 Spowoduje to wyświetlenie interfejsu RealPlayera, jeśli jest on zainstalowany w systemie użytkownika. Do odtwarzania dźwięku RealAudio w środowisku Windows najlepiej się nadaje darmowy RealPlayer G2. Pliki VQF W pewnym momencie popularnością cieszył się format VQF (TwinVQ Technology) japońskiej firmy Yamaha, aczkolwiek ostatnio jakoś mniej o niej słychać (formaty Microsoftu, Real Networks czy QuickTime, nie mówiąc już o MP3, zdecydowanie zawładnęły Internetem). Pliki w tym formacie charakteryzują się wysokością jakością przy dużym stopniu kompresji. Do odtwarzania używany jest darmowy YAMAHA SoundVQ Player, który jednocześnie stanowi wtyczkę dla przeglądarek internetowych. Do tworzenia dźwięku w tym formacie można wykorzystać również darmowy enkoder firmy Yamaha. Webmaster chcący wstawić plik VQF na swoją stronę, musi sporządzić nie tylko ten plik, ale i specjalny, tekstowy plik "wprowadzający".vqe, który podaje adres internetowy pliku VQF. Co istotne, konieczne jest w nim podanie adresu bezwzględnego, czyli (takiego pliku nie da się odtworzyć lokalnie, natomiast podanie adresu względnego spowoduje, że nie będzie on odtwarzany w Sieci, choć na dysku będzie działać). Jest to tylko i wyłącznie adres pliku VQF, nic więcej. Przykładowa składnia wywołująca panel odtwarzacza na stronie wygląda następująco: <EMBED SRC="welcome.vqe" AUTOSTART="true" REPEAT="FALSE" VOLUME="100" WIDTH="150" HEIGHT="40" TYPE="audio/x-twinvq-plugin" PLUGINSPAGE=" Plik MPEG i MP3 Pliki MPEG czy MP3 możemy umieszczać na stronie w postaci zwykłego odsyłacza albo zagnieżdżać je za pomocą polecenia EMBED, np. <embed src="plik.mp3" autostart=true> Plik MOV (QuickTime) <embed src="charriot.mov" border=0 width=200 height=17> Plik ASF (Advanced Streaming Format, Microsoft) i WMA (Windows Media Audio) Można także zagnieździć Windows Media Player na stronie. Na przykład: <Embed type="application/x-mplayer2" src="pliczek.asf" Name=MMPlayer1 Autostart=1 ShowControls=1 ShowDisplay=1 ShowStatusBar=1 DefaultFrame="Slide" width=280 height=300> Nawiasem mówiąc, możemy wymusić użycie Windows Media Playera, stosując zagnieżdżenie jego kontrolki na stronie, za pomocą polecenia <object>: <OBJECT ID="mediaPlayer" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" TYPE="application/x-oleobject"> <PARAM NAME="fileName" VALUE="jazzball.mid"> <PARAM NAME="autoStart" VALUE="false"> <PARAM NAME="showControls" VALUE="true"> </OBJECT> 17

18 Plik Flash (Macromedia) Shockwave Flash oferuje znacznie udoskonalone możliwości budowania efektownych, a zarazem zajmujących stosunkowo niewiele miejsca, interaktywnych animacji. Dobrym przykładem zastosowania tego formatu jest strona firmy Polbox, którą można oglądać zarówno w wersji tradycyjnej (HTML), jak i multimedialnej (Flash). A oto mały przykład zaczerpnięty z serwisu Webdesign. Oto przykład zagnieżdżenia animacji. Proszę w nim zwrócić uwagę na wymiary, kolor tła, typ MIME. <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" ID=film WIDTH=100 HEIGHT=120> <PARAM NAME=movie VALUE="film.swf"> <PARAM NAME=loop VALUE=false> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED SRC="film.swf" NAME=film swliveconnect=true WIDTH=100 HEIGHT=120 LOOP=false QUALITY=high SCALE=exactfit BGCOLOR=#FFFFFF TYPE="application/x-shockwave-flash" PLUGINSPAGE=" </EMBED> </OBJECT> Tabele Ogólne ramy tabeli <TABLE> </TABLE> Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. Wiersz tabeli <TR> </TR> Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu: <TABLE> <TH> </TH> <TR> </TR> <TR> </TR> <TR> </TR> </TABLE> Nagłówek kolumny <TH> </TH> służy do przechowywania nagłówka kolumny. Jest elementem OPCJONALNYM tabeli! Nagłówek tabeli jest zazwyczaj wyświetlany czcionką pogrubioną. 18

19 Komórka w wierszu <TD> </TD> Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład: <TABLE> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD><TD> </TD></TR> </TABLE> Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTM warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co oczywiście nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza. Przykład: a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <TABLE BORDER> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: <TABLE BORDER=10> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 19

20 c1 c2 c3 c4 c5 Obramowanie komórek Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami). <TABLE BORDER CELLSPACING=8> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Marginesy dla komórek Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1). <TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Oczywiście należy w rozsądny sposób ustawiać wartości parametrów, gdyż np. zbyt grube obramowanie czy zbyt mały margines czyni tabelę mniej przejrzystą i niezbyt estetyczną. a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Szerokość tabeli 20