Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00081 008655 10442499 na godz. na dobę w sumie
Zostań webmasterem! - książka
Zostań webmasterem! - książka
Autor: Liczba stron: 280
Wydawca: Helion Język publikacji: polski
ISBN: 83-87211-85-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).
Nie musisz pozostać na zawsze jedynie biernym uczestnikiem społeczności internetowej.

Możesz zaistnieć jako jej aktywny współtwórca projektując własne witryny WWW w języku HTML!

Wystawienie w Sieci stron WWW wymaga kilku czynności: ich napisania, sprawdzenia poprawności i wysłania na serwer. W podręczniku zaprezentowane więc zostaną nie tylko język HTML, ale i rozmaite czynności i narzędzia webmasterskie. Celem podręcznika jest zademonstrowanie całej procedury budowania serwisu WWW i prezentowania go we właściwy sposób w Internecie. Język HTML jest tylko składnikiem tej procedury -- bardzo ważnym, ale nie jedynym. Takie praktyczne podejście wyrazi się zatem pokazaniem całej gamy działań i odpowiednich narzędzi. Tak więc:

Dzięki temu kompleksowemu podejściu czytelnik będzie mógł łatwo poznać wszystkie istotne elementy webmasterskiego puzzla. Nie będzie też musiał studiować najdrobniejszych szczegółów języka, gdyż nie są mu one na co dzień potrzebne. Cały podręcznik jest podporządkowany naczelnej zasadzie prostoty i praktyczności.


Zawartość płyty CD ROM:


Sponsorem internetowym książki Pawła Wimmera 'Zostań webmasterem' jest serwis Webmaster Wydawnictwa HELION -- http://webmaster.helion.pl

 

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Zostaæ webmasterem! Autor: Pawe‡ Wimmer ISBN: 83-87211-85-0 Format: B5, stron: 280 Zawiera CD-ROM SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ Nie musisz pozosta(cid:230) na zawsze jedynie biernym uczestnikiem spo‡eczno(cid:156)ci internetowej. Mo¿esz zaistnie(cid:230) jako jej aktywny wsp(cid:243)‡tw(cid:243)rca projektuj„c w‡asne witryny WWW w(cid:160) jŒzyku HTML! Wystawienie w Sieci stron WWW wymaga kilku czynno(cid:156)ci: ich napisania, sprawdzenia poprawno(cid:156)ci i wys‡ania na serwer. W podrŒczniku zaprezentowane wiŒc zostan„ nie tylko jŒzyk HTML, ale i rozmaite czynno(cid:156)ci i narzŒdzia webmasterskie. Celem(cid:160) podrŒcznika jest zademonstrowanie ca‡ej procedury budowania serwisu WWW i(cid:160) prezentowania go we w‡a(cid:156)ciwy spos(cid:243)b w Internecie. JŒzyk HTML jest tylko sk‡adnikiem tej procedury -- bardzo wa¿nym, ale nie jedynym. Takie praktyczne podej(cid:156)cie wyrazi siŒ zatem pokazaniem ca‡ej gamy dzia‡aæ i odpowiednich narzŒdzi. Tak(cid:160) wiŒc: opiszemy jŒzyk HTML jako najwa¿niejszy budulec stron WWW okre(cid:156)limy podstawowy kanon czynno(cid:156)ci i narzŒdzi webmasterskich przedstawimy szczeg(cid:243)lnie warto(cid:156)ciowe oprogramowanie, z uwzglŒdnieniem potrzeb polskiego u¿ytkownika poka¿emy praktyczne sposoby umieszczania witryny w Sieci zamie(cid:156)cimy odpowiednie oprogramowanie na p‡ycie, dziŒki czemu czytelnik bŒdzie m(cid:243)g‡ szybko przyst„pi(cid:230) do pracy DziŒki temu kompleksowemu podej(cid:156)ciu czytelnik bŒdzie m(cid:243)g‡ ‡atwo pozna(cid:230) wszystkie istotne elementy webmasterskiego puzzla. Nie bŒdzie te¿ musia‡ studiowa(cid:230) najdrobniejszych szczeg(cid:243)‡(cid:243)w jŒzyka, gdy¿ nie s„ mu one na co dzieæ potrzebne. Ca‡y(cid:160) podrŒcznik jest podporz„dkowany naczelnej zasadzie prostoty i praktyczno(cid:156)ci. Wstęp ...................................................M...................................................M.................... ......... 8 HTML w pigułce ...................................................M...................................................M......... 10 Czym jest dokument HTML?...................................................d...................................... 10 Ramy dokumentu ...................................................d...................................................d..... 11 Ciało dokumentu ...................................................d...................................................d...... 12 Tytuły ...................................................k...................................................k.......................... 12 Akapity...................................................k...................................................k........................ 13 Wiersze...................................................k...................................................k.................. ...... 14 Pozioma linia...................................................k...................................................k............ ... 15 Grafika............................................k...................................................k................................ 15 Wykazy ...................................................k...................................................k....................... 16 Atrybuty czcionki...................................................k...................................................k........17 Wielkość i kolor czcionki ...................................................k.............................................. 18 Odsyłacze ...................................................k...................................................k.................... 20 Część nagłówkowa dokumentu...................................................d................................... 21 .... 22 Tytuł strony ...................................................k...................................................k............. Strona kodowa dokumentu ...................................................k............................................ 22 Struktura witryny ...................................................d...................................................d..... 23 Problem schyłkowych znaczników ...................................................d............................. 23 Koniec wieńczy dzieło ...................................................d................................................ 25 Struktura dokumentu...................................................M...................................................M. 26 HTML a sprawa polska...................................................d............................................... 26 Podstawowe elementy dokumentu ...................................................d.............................. 27 Więcej szczegółów o Head ...................................................d......................................... 28 Więcej szczegółów o Body ...................................................d......................................... 32 Kilka uwag o wlewaniu tekstu ...................................................k....................................... 34 Czcionki ...................................................M...................................................M................. ...... 35 Znaczniki fizyczne – atrybuty...................................................d..................................... 36 Znaczniki logiczne – style...................................................d........................................... 37 Kolory czcionki...................................................d...................................................d........ 37 Wielkość czcionki ...................................................d...................................................d.... 38 Zmiana kroju czcionki...................................................d................................................. 39 Elementy blokowe...................................................M...................................................M....... 44 Specyfika bloku...................................................d...................................................d........ 44 Wyrównywanie bloków ...................................................d.............................................. 45 Przełamanie wiersza i parametr clear...................................................d.......................... 47 Pozioma linia...................................................d...................................................d............48 Blok preformatowany...................................................d.................................................. 50 Blok cytowany ...................................................d...................................................d......... 51 Cytat w wierszu...................................................d...................................................d........ 51 Adres ...................................................d...................................................d........................ 52 Środkowanie...................................................d...................................................d............. 53 Komentarz...................................................d...................................................d................53 Wycinek dokumentu Div ...................................................d............................................ 53 Wycinek dokumentu Span ...................................................d.......................................... 54 Obramowanie Fieldset ...................................................d................................................ 55 Wykazy ...................................................M...................................................M................... ..... 56 Wykaz nieuporządkowany ...................................................d.......................................... 56 Wykaz uporządkowany...................................................d............................................... 58 Lista definicji ...................................................d...................................................d........... 61 Odsyłacze...................................................M...................................................M................ ..... 62 Istota odsyłaczy...................................................d...................................................d........ 62 Odsyłacze do etykiet ...................................................d...................................................d 63 Odsyłacze do stron ...................................................d...................................................d... 64 Odsyłacze do innych witryn...................................................d........................................ 65 Odsyłacze absolutne i względne ...................................................d................................. 66 Ścieżki dostępu ...................................................d...................................................d........ 66 Odwołania do innych dokumentów...................................................d............................. 68 Publikacje elektroniczne w formacie Adobe PDF ...................................................k......... 70 Odsyłacze do poczty elektronicznej...................................................d............................ 71 Odsyłacze do innych usług sieciowych...................................................d....................... 75 Odsyłacze do ramek ...................................................d...................................................d. 78 Mapy odsyłaczy na obrazkach ...................................................d.................................... 78 Grafika...................................................M...................................................M.................. ....... 81 Uwagi ogólne ...................................................d...................................................d........... 81 Wstawianie grafiki do dokumentu ...................................................d.............................. 81 Ikona przy adresie ...................................................d...................................................d.... 91 Multimedia ...................................................M...................................................M............... ... 93 Stare sposoby zagnieżdżania multimediów...................................................d................. 93 Plik RealAudio lub RealMedia ...................................................k...................................... 94 Plik Macromedia Flash ...................................................k.................................................. 95 Plik Apple QuickTime ...................................................k...................................................k 96 Nowe sposoby zagnieżdżania multimediów ...................................................d............... 96 ........ 98 Flash ...................................................k...................................................k.................... QuickTime ...................................................k...................................................k................ .. 98 RealMedia ...................................................k...................................................k................... 99 Tabele...................................................M...................................................M................... ...... 100 Szkielet tabeli...................................................d...................................................d......... 100 Obramowanie ...................................................d...................................................d......... 101 Pozycjonowanie tabeli i jej zawartości ...................................................d..................... 103 Kolory tabeli ...................................................d...................................................d.......... 106 Podpisy i nagłówki kolumn...................................................d....................................... 108 Łączenie komórek i zagnieżdżanie tabel...................................................d................... 110 Nagłówek, ciało i stopka tabeli ...................................................d................................. 112 Sterowanie obramowaniem...................................................d....................................... 113 Grupy kolumn ...................................................d...................................................d........ 118 Ramki...................................................M...................................................M.................... ..... 120 Ogólna struktura strony...................................................d............................................. 120 Informacje o Frameset...................................................d............................................... 123 Informacje o Frame...................................................d...................................................d 124 Odsyłacze ...................................................d...................................................d............... 125 Urozmaicenia ...................................................d...................................................d......... 126 Ramki w kolumnach i wierszach ...................................................d.............................. 129 Informacje o Noframes ...................................................d............................................. 131 Pływające ramki ...................................................M...................................................M....... 133 Podstawowa definicja...................................................d................................................ 133 Urozmaicenia ...................................................d...................................................d......... 134 Polecenie Object ...................................................d...................................................d.... 136 Formularze ...................................................M...................................................M............... . 140 Ogólne informacje...................................................d...................................................d.. 140 Ramy formularza...................................................d...................................................d.... 141 Rodzaje pól formularza ...................................................d............................................. 142 Pola Input ...................................................d...................................................d...............143 Typ Text ...................................................k...................................................k.................... 143 Typ Checkbox ...................................................k...................................................k........... 144 Typ Radio...................................................k...................................................k.................. 145 Typ Submit i Reset...................................................k...................................................k.... 146 Pola Select...................................................d...................................................d..............147 Pole Textarea...................................................d...................................................d.......... 149 Podsumowanie ...................................................d...................................................d....... 151 Przykład zbiorczy:...................................................k...................................................k..... 151 Znaki specjalne ...................................................M...................................................M......... 155 Kolory ...................................................M...................................................M................... ..... 157 Style...................................................M...................................................M.................... ........ 158 Czym jest styl? ...................................................d...................................................d....... 158 Budowa stylu...................................................d...................................................d.......... 159 Wstawianie stylów ...................................................d...................................................d. 160 Kaskadowość stylów...................................................d................................................. 163 Klasy selektorów...................................................d...................................................d.... 164 Własności czcionek...................................................d...................................................d 165 Własności tekstu ...................................................d...................................................d.... 169 Kolor i tło...................................................d...................................................d............... 172 Marginesy...................................................d...................................................d............... 175 Obramowania ...................................................d...................................................d......... 177 Wykazy ...................................................d...................................................d.................. 180 Suwaki...................................................d...................................................d.................... 184 Kursory ...................................................d...................................................d..................187 Drukowanie...................................................d...................................................d............ 188 Jednostki miary ...................................................d...................................................d...... 191 Selektory pseudoklas...................................................d................................................. 192 Selektory pseudoelementow...................................................d...................................... 193 Znacznik Div...................................................d...................................................d.......... 195 Znacznik Span...................................................d...................................................d........ 196 Znacznik @import ...................................................d...................................................d. 196 Narzędzia webmasterskie...................................................M............................................ 198 Kanon narzędzi ...................................................d...................................................d...... 198 Polskie litery ...................................................d...................................................d.......... 200 Edytory HTML ...................................................d...................................................d...... 202 WebPager Express ...................................................k...................................................k.... 203 ezHTML...................................................k...................................................k.................... 204 Website Pro ...................................................k...................................................k.............. . 205 TopStyle Lite...................................................k...................................................k............ Porównanie edytorów ...................................................k.................................................. 206 Style ...................................................d...................................................d....................... 210 . 210 Edytory nagłówków ...................................................d.................................................. 211 MetaWizard...................................................k...................................................k...............211 Metty ...................................................k...................................................k......................... 212 Edytory kolorów dokumentu...................................................d..................................... 213 HTMLcolor ...................................................k...................................................k............... 213 ColorDetector...................................................k...................................................k............214 Cięcie i mapowanie grafiki ...................................................d....................................... 215 .. 215 Map This! ...................................................k...................................................k................ MapMakerPro LITE...................................................k...................................................k.. 216 GeoHTML...................................................k...................................................k................. 217 CoffeeCup Free Viewer Plus ...................................................k....................................... 218 Sprawdzanie poprawności kodu...................................................d................................ 219 CSE HTML Validator Lite ...................................................k.......................................... 220 TagCheck ...................................................k...................................................k................. . 221 Sprawdzanie poprawności odsyłaczy...................................................d........................ 222 CheckURL ...................................................k...................................................k................ 222 Xenu Link Sleuth ...................................................k...................................................k...... 223 LinkProver ...................................................k...................................................k................ 224 Tworzenie grafiki...................................................d...................................................d... 224 IrfanView ...................................................k...................................................k.................. 226 PhotoPlus ...................................................k...................................................k................ .. 227 Flash...................................................d...................................................d....................... 228 FlashToolSet ...................................................k...................................................k.............229 Pobieranie grafik z Internetu...................................................d..................................... 230 Aaron s WebVacuum ...................................................k...................................................k 231 Katalogowanie grafik ...................................................d................................................ 232 FotoAlbum ...................................................k...................................................k................232 Tworzenie dźwięku ...................................................d...................................................d 233 Audacity ...................................................k...................................................k.................... 234 dbPoweramp...................................................k...................................................k.............. 234 Zakładanie witryny i wysyłanie stron ...................................................d....................... 236 Onet.pl...................................................k...................................................k....................... 236 Wirtualna Polska ...................................................k...................................................k....... 241 Inne techniki wysyłania stron...................................................d.................................... 244 SendToFTP ...................................................k...................................................k............... 244 Web Publishing Wizard ...................................................k............................................... 246 FTPEdit ...................................................k...................................................k..................... 247 Własny serwer WWW...................................................d............................................... 248 Promocja stron ...................................................d...................................................d....... 248 MrKrax URL Submitter ...................................................k............................................... 248 Etykieta webmastera ...................................................M...................................................M 250 Podstawowe przykazanie webmastera ...................................................d...................... 250 Uwagi „ideologiczne” ...................................................d............................................... 251 Uwagi techniczne...................................................d...................................................d... 252 I co dalej? ...................................................M...................................................M.............. .... 255 Spis ilustracji...................................................M...................................................M.......... ... 261 Skorowidz ...................................................M...................................................M................ .. 269 Dobrym zwyczajem, spotykanym często w podręcznikach dla początkujących, jest przed- stawienie opisywanych zagadnień w postaci krótkiego szkicu, który da pogląd na całość problematyki. W bieżącym rozdziale zaprezentujemy więc podstawowe informacje o bu- dowaniu dokumentu HTML. Po uważnym przestudiowaniu treści tego rozdziału, co zaj- mie niewiele czasu, każdy będzie potrafił sporządzić prosty dokument, a nawet nazwać się webmasterem. Pozostałe rozdziały będą stanowiły rozwinięcie tematyki. Warto je przeczytać po opano- waniu i przećwiczeniu informacji zawartych w tym rozdziale. Okaże się, że ich zrozumie- nie nie nastręczy większych trudności, gdyż będą logicznie wynikały z tego zasobu wie- dzy, który czytelnik pozna w pierwszym rozdziale. Bierzmy się zatem do pracy. Czym jest dokument HTML? Dokument HTML jest zwykłym plikiem tekstowym. Można go redagować w najprost- szym edytorze tekstów – nawet tak prostym, jak znany wszystkim Notatnik w Windows. Oczywiście, programiści wymyślili specjalne edytory, które znakomicie ułatwiają reda- gowanie takich dokumentów, ale warto w tym miejscu podkreślić, że dokument HTML nie jest czymś tajemniczym i niezrozumiałym. Zauważmy od razu, że plik z dokumentem ma charakterystyczne rozszerzenie .htm lub .html. To wiedzą chyba wszyscy. Gdy klikniemy podwójnie na takim pliku, od razu zgłosi się domyślna przeglądarka internetowa (np. Internet Explorer) i wczyta plik, prezentując jego zawartość na ekranie. I w tym miejscu należy wyraźnie powiedzieć, że dokument HTML tworzony w edytorze oraz to, co zobaczymy w przeglądarce, są ściśle ze sobą powiązane, jak awers i rewers tej samej monety. Wynika to stąd, że dokument zawiera specjalne znaczniki, które są inter- pretowane przez przeglądarkę. Inaczej mówiąc, znaczniki są poleceniami dla przeglądarki, aby poszczególne fragmenty dokumentu wyświetliła w nakazany sposób. Redagowany przez nas dokument jest źródłem, które ulega przetwcorzeniu przez przeglądarkę. Przykładowo, znacznik b powie przeglądarce, aby tekst następujący po nim wyświetliła w pogrubieniu (b=bold). Znacznik p nakaże przeglądarce wyświetlić następujący po nim tekst, jako kolejny akapit (p=paragraph). Rysunek 1 - Przykład tekstu pogrubionego i akapitu Wszystkie znaczniki tworzą język HTML. Zostały one skodyfikowane przez jedną z naj- ważniejszych instytucji współczesnego świata – World Wide Web Consortium (http://www.w3.org). To grupa pracujących społecznie specjalistów, którzy w drodze dys- kusji wypracowali obowiązujący standard języka HTML. Jak więc widać, trzeba się nauczyć kilkunastu czy kilkudziesięciu znaczników, aby można było budować strony internetowe. Powiedzmy więcej – nie trzeba się ich wcale uczyć na pamięć. Wystarczy je rozumieć, a wyspecjalizowany edytor HTML ułatwi nam ich wsta- wianie. Nie trzeba będzie robić tego ręcznie. Na początku polecamy jednak używanie Notatnika (czy jakiekolwiek innego edytora, który potrafi zapisywać pliki jako zwykły tekst) i wstawianie znaczników ręcznie. To znakomite ćwiczenie, które pozwoli lepiej „wyczuć” istcotę znaczników. WAŻNE: w osobnym rozdziale powiemy więcej o narzędziach webmastera. Okazuje się, że w Sieci istnieje mnóstwo darmowych programów, które pozwolą nam tworzyć wszystkie niezbędne elementy strony WWW, nie wydając na to ani grosza. Wiele na- rzędzi zamieściliśmy na płycie CD dołączonej do podręczznika. Ramy dokumentu Jak powiedzieliśmy, 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 . Wiel- kość 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. Polecamy stosowanie małych liter. 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ń. Spotyka się wprawdzie w Internecie strony, które szkieletu nie zawierają (czasem tylko jego część), ale odradzamy taką praktykę, gdyż w pewnych okolicznościach może ona zaowocować niespodziewanymi efektami. 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 . Wygląda to następująco: html head informacje nagłówkowe /head body właściwa treść (ciało) dokumentu /body /html Tak właśnie wygląda dokument „z lotu ptaka”. Wszystkie te zadziwiające rzeczy, które widzimy na wielu stronach w Internecie, są umieszczane właśnie w tych ramach. Przyj- rzyjmy im się nieco bliżej. Ciało dokumentu Dla czytelnika naszej strony najważniejsze jest oczywiście ciało dokumentu, gdyż zawiera ono to wszystko, co zobaczymy w przeglądarce. Umieścimy w nim tekst podzielony na akapity, śródtytuły, tabele, obrazki, muzykę – wszystko, co nam tylko przyjdzie do głowy i na co pozwoli język HTML. Poszczególne elementy są umcieszczane między znacznikami body /body . Tytuły Mianem tytułów określamy specjalnie wyróżnione akapity, które nazywają w jakiś sposób pewne fragmenty inni mówią „śródtytuły”, a sens jest taki sam. Na potrzeby naszego podręcznika przyjmijmy określenie „tytuły”. Mają one różny stopień, od 1 do 6. tekstu. Niektórzy używają określenia „nagłówki”, Aby wstawić tytuł stopnia pierwszego (najwyższy w hiercarchii), należy podać polecenie: h1 Treść tytułu /h1 Widzimy od razu, że h1 rozpoczyna oznaczanie tekstu jako tytułu pierwszego stopnia, natomiast /h1 kończy. Większość znaczników ma taką właśnie konstrukcję. Zwróćmy uwagę na ukośnik wskazujący zamknięcie znacznika. Analogicznie, tytuły niższych stopni tworzymy za pomcocą h2, h3 itd. I przykład: Rysunek 2 - Tytuły sześciu stopni Jak łatwo zauważyć, tytuły są doskonałym narzędziem do rozdzielania logicznych frag- mentów tekstu i hierarchizowania ich. Zachodzi tutaj pełna analogia z książkami, gdzie spotykamy rozmaite stopnie śródtytułów, pozwalające wydzielić bloki tekstu i pokazać logikę całej pracy. Akapity Tytuły są nazwami fragmentów tekstu, ale najważniejsze są oczywiście akapity, gdyż to właśnie w nich zawarta jest główna treść naszego dokucmentu. Także i tutaj stosujemy znacznik wskazujący otwarciec akapitu i jego zamknięcie: p Treść akapitu /p Zobaczmy ponownie, jak wyglądają akapity w przeglądcarce. Rysunek 3 - Tytuł i dwa akapity Jak widać, oddzielne akapity są automatycznie rozdzielane. Co więcej, odległość między nimi jest nieco większa niż między wierszami w ramach jednego akapitu. Przeglądarka zinterpretowała tu w odpowiedni sposób następujący ckod: h1 Tytuł stopnia pierwszego /h1 p pierwszy akapit pierwszy akapit pierwszy akapit pierśwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit pierwszy akapit /p p drugi akapit drugi akapit drugi akapit drugi akaśpit drugi akapit drugi akapit drugi akapit drugi akapit drugiś akapit drugi akapit drugi akapit drugi akapit drugi akapitś drugi akapit drugi akapit drugi akapit drugi akapit drugiś akapit drugi akapit drugi akapit /p Wiersze 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 , które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. Nie stosuje się tutaj znacznika zamykającego. To jest pierwszy wiersz BR To jest drugi wiersz BR To jest trzeci wiersz BR To jest czwarty wiersz BR Ilustracja pokaże różnicę między odstępami tworzonymi przez akapity i odstępami two- rzonymi przez znaczniki przełamania wiersza. Rysunek 4 - Przełamanie wiersza Ponadto polecenie br ma jeszcze jedną zaletę. Napisanie kilku kolejnych br po- zwala zwiększyć pionowy odstęp między elementami. Pozioma linia Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomo- cą 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. Ilustracja pokazuje oddzielenie tekstu od innych za pomo- cą dwóch poziomych linii. Rysunek 5 - Poziome linie Grafika Nie sposób wyobrazić sobie stronę WWW bez grafiki. Może to być zwykły ozdobnik, ale także np. rodzinne zdjęcia, obrazki z wakacji, domowe zwierzaki czy cokolwiek innego. Coraz popularniejsze są cyfrowe aparaty fotograficzne, z których możemy bezpośrednio pobierać obrazki w internetowych formatach. Możemy też skanować zwykłe zdjęcia za pomocą skanera. Ponadto w Internecie znajdziemy ogromne zasoby darmowych grafik, które możemy wykorzystać na swoich stronach (obszerną listę adresów znajdzie Czytelnik na płycie CD). W dokumentach HTML możemy umieszczać grafiki zapisane w formatach GIF, JPG lub PNG. Szczególnie popularne są te dwa pierwsze formaty. Aby w przeglądarce pojawił się obrazek, należy wpisać polecenie: img src=”nazwa_obrazka” Dla przykładu, wstawmy do dokumentu polecenie, które wyświetli zdjęcie zrobione do- raźnie domowemu kotu za pomocą aparatu cyfrowego. img src=”kot.jpg” IMG oznacza image (obrazek), SRC to source (źródło), „kot.jpg” to oczywiście nazwa pliku z obrazkiem. Plik ten powinien być umieszczony w katalogu razem z dokumentem HTML. Dokument wyświetlany w przeglądarce odwołuje się do tego pliku i przywołuje zawartość we wskazanym miejscu. Rysunek 6 - Ilustracja na stronie WWW Wykazy Na stronach WWW powszechnie stosuje się wykazy (zwane też listami). Są to po prostu systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakte- rze opisowym w skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów tekstów spotykają się z tym elementem - np. w polskiej wersji edytora Word są one znane pod nazwą list numerowanycch i list wypunktowanych. Aby utworzyć szkielet wykazu nieuporządkowanego, 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 aby wygrać wojnę, należy mieć: p ul li po pierwsze, pieniądze /li li po drugie, pieniądze /li li po trzecie, pieniądze /li /ul W efekcie uzyskamy: Rysunek 7 - Wykaz nieuporządkowany Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika li , czy też zastosuje- my dodatkowo znacznik zamykający /li . Autorzy edytorów HTML stosują różne konwencje, a wynik w przeglądarce WWW w obu przypadkach jest identyczny. General- nie jednak zaleca się zamykanie znaczników. Gdy chcemy utworzyć wykaz uporządkowany, wówczas zamiast ul i /ul możemy zastosować 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). Rysunek 8 - Wykaz uporządkowany 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żniej- sze 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ń: Rysunek 9 - Podstawowe atrybuty czcionki Wielkość i kolor czcionki Gdyby autorowi strony znudził się tekst, w którym czcionka ma ten sam kolor i wielkość, zawsze może się posłużyć dodatkowymi poleceniami, zmieniającymi obie cechy. W do- kumentach HTML stosuje się nieco inną definicję wielkości czcionki, niż przyjęta w edy- torach tekstów. 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-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 cczcionka 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. font size= x tekst objęty definicją /font x = 1...7 Widok w przeglądarce: Rysunek 10 - Czcionki o różnej wielkości 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ę znacznik tytułu. W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się tutaj polece- niem: font color= kolor tekst objęty poleceniem /font Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości szesnast- kowych (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 niebie- ska), aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML. Niektóre z edytorów pozwalają wybrać barwę za pomocą suwaków i wstawiają odpowiedni kod do edytora. Internet Explorer i Netscape Navigator interpretują również nazwy kolorów. Początkowo można było się posłużyć jedną z 16 barw, potem paleta rozszerzyła się do 256 kolorów. Najczęściej jednak, przy definiowaniu koloru tekstu wystarczy 16 barw i można przyjąć, że posługiwanie się nazwami kolorów jest najwygodnicejszą metodą ich definiowania. Oto lista szesnastu podstawowych barw – ich nazwy wpcisujemy w miejsce „kolor”. black maroon green navy silver red lime blue gray purple olive teal white fuchsia yellow aqua Ich reprezentacja w przeglądarce internetowej (w czarno-białej książce tego nie widać, ale na płycie CD znajduje się przegląd kolorów): Rysunek 11 - szesnaście podstawowych kolorów 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 doku- mentu 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ła- cze, ich wspólne zainteresowania zostaną zjednoczone za pomocą hipertekstu, który połą- czy te strony w jedną logiczną całość. 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. W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do innych stron WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one bowiem najpow- szechniej stosowane. Odsyłacz do innej strony jest tworzony za pomocą poclecenia: a href= adres_strony_internetowej Nazwa tej strony /a Przykładowy adres mógłby wyglądać następująco: a href= http://www.onet.pl Portal Onet.pl /a Rysunek 12 - Typowy widok odsyłacza internetowego Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o na- zwie index.html (lub index.htm - zależy to od typu serwcera WWW). Uwaga: zalecamy 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 niekiedy default.htm lub default.html. Na ekranie przeglądarki wyświetlany jest tekst, który znajduje się między znacznikami a href= ... i /a . Jest on domyślnie wyświetlany na niebiesko z pod- kreś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. Zwróćmy uwagę na to, że adres internetowy jest podawany w cudzysłowie. Dla działania odsyłacza nie jest to wprawdzie absolutnie konieczne, ale wymaga tego formalna popraw- ność składni. Drugim ważnym odsyłaczem jest adres poczty elektroncicznej. Bardzo często autorzy stron, którzy przecież dysponują zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika. Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z autorem. Stosujemy tutaj na przykład następujące polecenie: A HREF= mailto:autor@jego.adres Imię i nazwisko /A Na przykład: A HREF= mailto:prwimmer@poczta.onet.pl Paweł Wimmer /A Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną. Navigator wywoła swój własny moduł pocztowy Mail, Internet Explorer zaś wywoła Outlook Express (albo Outlook z pakietu MS Office, jeśli jest on domyślnym programem pocztowym). Także i tutaj konsekwentnie stosujmy cudzysłów w adresie. Fragment w postaci: Jeśli masz jakieś uwagi, napisz do A HREF= mailto: prwimmer@poczta.onet.pl autora strony /A zostanie przedstawiony w przeglądarce następująco: Rysunek 13 - Przykład adresu poczty elektronicznej Przesunięcie kursora myszki nad tekst autora strony wyświetli w pasku stanu adres poczty elektronicznej, natomiast kliknięcie myszką spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zcredagować list do autora. Część nagłówkowa dokumentu W części nagłówkowej dokumentu można umieścić rozmaite informacje opisowe decy- dujące, jak nasza strona będzie wyświetlana, a także jak będą ją postrzegać sieciowe wy- szukiwarki. Powiemy na ten temat więcej w innym rozdziale, a już teraz zwrócimy uwagę na te elementy, które przydadzą się początkującemu cużytkownikowi. Tytuł strony Gdy otwieramy jakąś stronę w przeglądarce, w belce tytułowej widzimy zazwyczaj jej tytuł, np. Strona Jana Kowalskiego. Nie wolno zapominać o tym elemencie, gdyż pełni on istotną rolę informacyjną. Gdybyśmy o nim zapomnieli, w tym miejscu ukaże się jedy- nie nazwa fizycznego pliku i jego adres (na dysku lub w Internecie). W części nagłówko- wej Head wstawiaj więc zawsze tytuł, na przykład: head title Strona Jana Kowalskiego /title /head Rysunek 14 - Tytuł strony Tytułu strony nie należy mylić z tytułami (śródtytułami, nagłówkami) wewnątrz doku- mentu, definiowanymi za pomocą H1, H2 itd. Strona kodowa dokumentu Właściwą stroną kodową dokumentu jest ISO-8859-2. Jest to międzynarodowy standard przyjęty przez stosowne ciała kodyfikujące. W Windows standardem jest strona kodowa Windows-1250. Powstaje zatem pytanie, co jest słuszne. Oczywiście ISO, ale w początkowej fazie nauki sugerujemy stosowanie Notatnika jako edytora i wstawianie do nagłówka dokumentu deklaracji Windows-1250. Tak będzie po- ręczniej w pierwszych próbach budowania dokumentów HTML, gdyż w Notatniku wyko- rzystywany jest właśnie ten standard, podobnie jak w wielu innych programach dla Win- dows, które używamy na co dzień. head meta http-equiv= content-type content= text/html; charset=windows-1250 /head Deklarację strony kodowej wstawiaj do każdego dokumcentu HTML! Dopiero po wykonaniu szeregu ćwiczeń i przejściu do systematycznej nauki warto będzie sięgnąć po wyspecjalizowany edytor i stosować już stronę kodową ISO-8859-2. Ma ona postać: meta http-equiv= content-type content= text/html; charset=iso-8859-2 W niezbyt odległej perspektywie wszyscy przejdziemy zapewne na standard Unicode, który w jednej tabeli zawiera znaki należące do wszystkich języków (dzięki temu można będzie łatwiej pisać wielojęzyczne dokumenty), ale na razie ograniczamy się do przyję- tych powszechnie standardów. Struktura witryny Gdy stawiamy pierwsze kroki, tworzymy zazwyczaj pojedyncze dokumenty. Witryna internetowa składa się jednak na ogół z wielu powiązanych ze sobą dokumentów. Łączy- my je za pomocą odsyłaczy, zaś główny dokument zapisujemy w pliku index.htm lub index.html. Inne mogą mieć dowolne nazwy, nawet wielowyrazowe. Ale uwaga, nie uży- waj w nazwach plików polskich liter i nie stosuj spacji. Tak więc nie twórz pliku „kącik humoru.htm”, lecz „kacik_humoru.htm”. W wielowyrazowych nazwach łącz wyrazy pod- kreśleniem. Na dalszym etapie nauczysz się tworzenia wielu stron i łączenia ich ze sobą, ale na po- czątku warto przećwiczyć tworzenie pojedynczych dokucmentów. Bardzo ważna uwaga: zapisuj zawsze pliki małymi literami. Nie Index.htm czy INDEX.HTM, lecz index.htm. Wynika to stąd, że serwery internetowe pracują zazwy- czaj pod kontrolą systemu operacyjnego Unix, który rozróżnia wielkość liter. Zatem pliki takie są dla nich różnymi plikami, choć pozornie nazywają się tak samo. Na lo- kalnym dysku nie ma to znaczenia, ale kłopot może się pojawić właśnie na serwerze. Konsekwentnie stosuj więc małe litery. W rozdziale o narzędziach webmasterskich powiemy o sposobach posyłania plików na serwer. Jednak już teraz zapamiętaj, że struktura witryny na lokalnym dysku powinna być identyczna ze strukturą na serwerze. W przeciwnym razie pojawią się kłopoty z odsyła- czami. Problem schyłkowych znaczników World Wide Web Consortium uznało rozmaite znaczniki HTML, które pojawiały się we wcześniejszych wersjach języka, za schyłkowe (deprecated). Oznacza to, że organizacja zaleca sukcesywne rezygnowanie z ich stosowania w dokumentach HTML. Typowym przykładem mogą być znaczniki sterujące wyświetlaniem czcionki, jak wielkość, krój czy kolor. Nie oznacza to oczywiście, że na skutek jakiejś arbitralnej decyzji tracimy nagle możli- wość formatowania czcionek czy innych elementów. Starsze polecenia są po prostu zastę- powane przez nowe – w tym konkretnym przypadku definicje czcionki powinny być po prostu zastąpione przez polecenia określone w specyfikacji stylów. Dla przykładu, zamiast „starej” definicji: p font face=”verdana” color=”red” Treść akapitu /font ś/p możemy użyć nowej, stosując style: p style= font-family: verdana; color: red To jest jakiś akapit /p Efekt będzie oczywiście ten sam. Warto od razu powiedzieć, że polski edytor Pajączek zawiera mechanizm wyświetlający „przestarzałe” znaczniki , dzięki czemu użytkownik może się od razu zorientować czy warto zastosować jakieś polecenie, czy też może rozważyć użycie nowocześniejszej tech- niki. Jeśli jakiś znacznik jest wyświetlany w edytorze z przekreśleniem, oznacza to wła- śnie, że ma status „deprecated”. Rysunek 15 - Pajączek zaznacza schyłkowe znaczniki Narzuca się zatem pytanie, po co uczyć się starszych znaczników, skoro deprecjonuje je tak ważna instytucja jak W3C. Wyrażając tutaj jedynie swoją własną opinię, pragnę pod- kreślić następujące okoliczności, które przemawiają zca starszymi znacznikami.  Trudno sobie wyobrazić naukę języka HTML bez poznania tych intuicyjnie zro- zumiałych i wygodnych w stosowaniu znaczników. Byłoby to tak, jak gdyby po- czątkujący adept rachunku prawdopodobieństwa zaczynał poznawanie tej pasjo- nującej dyscypliny od aksjomatycznej definicji prawdopodobieństwa, a nie od prostych ćwiczeń z rzucaniem kostką do gry, które kiedyś natchnęły jakieś ge- nialne umysły do stworzenia całej teorii.  W wielu sytuacjach użycie starszych poleceń jest po prostu szybsze i wygodniej- sze.  Można być niemal pewnym (tak zresztą zaleca W3C), że przecglądarki internetowe będą zawsze interpretowały klasyczne znaczniki, gdyż odejście od tego oznacza- łoby katastrofę w niezliczonych milionach dokumentów opublikowanych dotych- czas w Sieci. Nie sposób przecież skłonić miliony osób do podjęcia jakiejś gre- mialnej akcji poprawiania stron zgodnie z nowymi zasadami. Póki co, nie mamy jeszcze żadnych automatycznie działających konwerterów, które w cudowny spo- sób zamieniłyby stare na nowe. Zalecając oczywiście przenoszenie jak największej ilcości informacji do stylów, bynajmniej nie warto straszyć webmasterów tym, że użyte tu i ówdzie polecenia font , u czy center nagle przestaną funkcjonować. Można się jedynie spodziewać, że powolutku, w ciągu wielu lat, coraz więcej osób będzie wykorzystywać nowocześniejsze techniki, zaś udział dokumentów sformatowanych w tradycyjny sposócb będzie sukcesywnie maleć. Polecenie applet basefont center dir font isindex menu s strike u Zamiennik object Arkusze stylów Align=center lub arkusze stylów ul Arkusze stylów input ul Arkusze stylów Arkusze stylów Arkusze stylów Uwaga: Stosując polecenia schyłkowe, warto zarazem stosować prolog Transitional, dzięki któremu przeglądarka powinna wyświetlać nie tylko aktualne polecenia HTML 4, lecz i znaczniki ze statusem deprecated. Inna sprawa, że jak na razie przeglądarki są tolerancyjne i nie dyskryminują tych znaczników zzależnie od użytego prologu. Dokładniejszą informację o prologu znajdzie Czytelnik w rozdziale Struktura dokumentu (punkt Podstawowe elementy dokumentu strona Błąd! Nie zdefiniowano zakładki..). Koniec wieńczy dzieło Na zakończenie tego rozdziału mam dla wszystkich czytelników dobrą nowinę. Jesteście już webmasterami! Może jeszcze nie w każdym calu, ale pokazane wyżej techniki w pełni wystarczą do sporządzenia swojej internetowej wizytówki. Tak jak kiedyś umiejętność pisania i czytania stała się cywilizacyjnym wymogiem, tak dzisiaj umiejętność zapisywa- nia informacji na wielkiej tablicy zwanej World Wide Web decyduje o przewadze nad tymi, którzy tej sprawności jeszcze nie posiedli. Polecam zatem przećwiczenie opisanych technik – wypróbowanie rozmaitych układów elementów, zmianę ich treści – aby w pełni panować nad tworzeniem strony. Potem warto będzie przystąpić do studiowania następnych rozdziałów, które poszerzą naszą wiedzę o przydatne narzędzia.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Zostań webmasterem!
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: