Wprowadzenie do języka znaczników HTML

Transkrypt

1 Wprowadzenie do języka znaczników HTML

2 Historia HTML HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to język składający się ze znaczników (ang. tags) stosowany do pisania stron WWW. HTML jest teoretycznie aplikacją SGML-a. Jego pierwsza wersja została opracowana przez Tima Berners- Lee w 1989 roku, który w tym czasie był konsultantem do spraw oprogramowania pracującym dla CERN (franc. Conseil Européen pour la Recherche Nucléaire, czyli Europejski Ośrodek Badań Jądrowych). Pierwotnie składał się on z kilkunastu znaczników umożliwiających wyświetlanie tekstu wraz z odsyłaczami do innych tekstów. Rewolucyjność pomysłu polegała na tym, że użytkownik przeskakujący do innego tekstu nie musiał w ogóle wiedzieć gdzie fizycznie znajduje się interesujący go tekst. Była to tzw. zerowa wersja HTML.

3 WWW World Wide Web (w skrócie określany jako WWW lub Web) jest hipertekstowym, multimedialnym, sieciowym (TCP/IP) systemem informacyjnym opartym na publicznie dostępnych, otwartych standardach IETF, W3C i ISO. Pierwotnym i w chwili obecnej nadal podstawowym zadaniem WWW jest publikowanie informacji. Aby uzyskać dostęp do tak udostępnianej informacji, trzeba posłużyć się programem komputerowym, który nazywamy przeglądarką internetową. Przeglądarka łączy się z serwerem internetowym, skąd pobiera pewien zbiór informacji określany jako strona internetowa. Strona internetowa może zostać wyświetlona, zapisana w lokalnym systemie plików czy wydrukowana.

4 WWW Zawartość strony internetowej jest hipertekstem, znaczy to, że użytkownik oglądając stronę internetową może podążać za hiperłączami, które przenoszą go do innych stron internetowych w ramach tego samego serwera internetowego lub innych dostępnych w ramach sieci. Często korzystanie z WWW nazywa się "surfowaniem po sieci". World Wide Web został zapoczątkowany na początku lat dziewięćdziesiątych w CERN jako system dostępu do danych, informacji (w tym graficznych) w heterogenicznym środowisku dużej organizacji naukowej. Tim Berners-Lee, nazywany twórcą WWW, zbudował prototyp systemu, który później został przekształcony w to czym WWW jest dzisiaj. Szybko przekroczył (podobnie jak Internet) granice środowiska naukowego, a po kilku latach został zaadaptowany na całym świecie.

5 Standard Generalized Markup Language SGML (ang. Standard Generalized Markup Language) to zestandaryzowany nadrzędny język znaczników służący do ujednolicania struktury i formatu różnego typu informacji (danych), pozwalający zapisać je w formie dokumentu tekstowego i dzięki temu łatwo przenosić, wyświetlać i drukować w różnych systemach elektronicznego przekazu danych. SGML w odróżnieniu od języków znaczników dedykowanych do konkretnych zastosowań (takich jak np. HTML), nie jest zbiorem określonych znaczników i reguł ich użytkowania, lecz ogólnym, nadrzędnym językiem służącym do definiowania dowolnych znaczników i ustalania zasad ich poprawnego użytkowania.

6 Standard Generalized Markup Language Języka SGML używa się praktycznie do dwóch celów: precyzyjnego definiowania zbiorów znaczników dedykowanych do konkretnych zastosowań przykładem jest język HTML; ujednolicania zasad pisania i przekazywania dokumentów tekstowych w obrębie dużych firm lub instytucji. W obydwu przypadkach dokument w języku SGML składa się z trzech części: deklaracji dokumentu, która definiuje ogólne reguły stosowane w zapisie dokumentu (np. maksymalna długość nazwy elementu, znak używany jako początek znacznika (domyślnie jest to znak < ); DTD definicji typu dokumentu, czyli definicji wszystkich znaczników i reguł ich stosowania; właściwego dokumentu tekst wraz ze znacznikami.

7 Standard Generalized Markup Language Ze względu na złożoność standardu SGML bardzo mało narzędzi implementuje pełen standard. Zwykle edytory SGML obsługują większość powszechnie używanych elementów języka i interpretują jedynie część pliku deklaracyjnego. W związku z trudnościami implementacyjnymi powstał język i standard XML będący początkowo podzbiorem reguł SGML (pierwsza wersja powstała w 2000 roku). Standard XML można obsługiwać narzędziami SGML-owymi modyfikując odpowiednio plik deklaracyjny. Ponieważ w praktyce zarówno deklaracja dokumentu SGML jak i DTD "zaszyte" są najczęściej w oprogramowaniu (np. w przypadku języka HTML w przeglądarkach i programach do pisania stron WWW), użytkownicy końcowi, a nawet osoby przygotowujące na co dzień dokumenty, nie mają bezpośredniej styczności z DTD tej odmiany języka SGML, z której właśnie korzystają.

8 Dobra strona 1. Zastanów się dobrze nad tematyką swojej strony. Nie zapominaj, że wiele osób łączy się z Internetem za pomocą modemu, płacąc za każdą minutę spędzoną w sieci. 2. Uważaj z doborem kolorów na stronie, zwłaszcza jeśli chodzi o tło oraz tekst. Nieciekawe lub rażąco złe zestawienie barw jest najważniejszym czynnikiem, który zdradza, że autor serwisu jest kompletnym amatorem. Unikaj jak ognia jaskrawych odcieni w tle. Jeśli nie masz pomysłu, ustal białe tło i czarny tekst - tak jest najbezpieczniej. Dobre rezultaty dają również barwy całkiem ciemne lub delikatne pastelowe (jasne). Tło w żadnym razie nie może pogarszać czytelności strony, dlatego należy pamiętać o doborze odpowiedniego koloru tekstu. 3. Nie przesadzaj z grafiką. Pamiętaj, że to właśnie grafika najbardziej wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to naprawdę dobrej jakości. Tworząc samodzielnie obrazy, używaj antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą po której na pierwszy rzut oka można rozpoznać dobrego projektanta jest oszczędne i umiejętne operowanie grafiką, która dobrze komponuje się z wyglądem strony.

9 Dobra strona 4. Przyjrzyj się innym renomowanym witrynom. Zwróć uwagę na projekt szaty graficznej. Dużo nie zawsze znaczy dobrze. Czasem bardziej oszczędna forma wygląda lepiej - a przede wszystkim czytelniej - niż wyszukane ozdobniki. Najważniejszy jest dobry pomysł. Pamiętaj, że kolorystyka witryny oraz projekt oprawy graficznej to pierwsze rzeczy, na które zwracają uwagę użytkownicy. Większość dobrych stron w Internecie zbudowana jest następująco: na górze znajduje się banner lub logo serwisu, po lewej lub po prawej - menu, a obok - treść strony. Tutaj można umieścić logo serwisu Tu umieszcza się odsyłacze spisu treści Tu wpisuje się treść strony

10 Dobra strona 5. Nawigacja w serwisie to bardzo ważna sprawa. Nieczytelny układ strony, menu w którym trudno cokolwiek znaleźć i inne podobne historie są częstą przyczyną zniechęcenia użytkowników, którzy w konsekwencji opuszczają witrynę. Przy projektowaniu systemu odsyłaczy spróbuj wczuć się w sposób myślenia internautów. Pamiętaj, że nie znają oni serwisu tak dobrze jak Ty i mogą nie chcieć zagłębiać się w szczegóły. Dlatego warto w widocznym miejscu umieścić hiperłącza do najciekawszych działów, jakiś system wyszukiwania lub indeks. W przypadku obszerniejszych witryn wskazane jest podzielenie ich na działy tematyczne. Sposób nawigacji powinien być przede wszystkim wygodny, praktyczny, logiczny i łatwo dostępny. 6. Dbaj o poprawność ortograficzną i stylistyczną tekstu. Naucz się zasad wpisywania znaków interpunkcyjnych. 7. Postaraj się na bieżąco aktualizować treść strony i usuwać powstałe błędy. Udoskonalaj oprawę graficzną oraz system nawigacji, aby serwis nie stał się nudny. Informuj o wprowadzanych nowościach i utrzymuj kontakt listowny z użytkownikami. Otwórz się na konstruktywną krytykę.

11 Struktura dokumentu Dokument HTML jest zwykłym dokumentem tekstowym o ustalonym kodowaniu znaków składającym się z elementów/tagów/znaczników. Element zwykle składa się z trzech części: znacznika początkowego (w formie <znacznik>) zawartości elementu (tekst lub inne elementy) znacznika końcowego (w formie </znacznik>)

12 Struktura dokumentu Elementy mogą też mieć przypisane atrybuty precyzujące znaczenie danego elementu. Atrybuty wraz z ich wartościami wpisuje się wewnątrz znacznika początkowego (<znacznik atrybut="wartość">). Niektóre elementy nie muszą, a niektóre wręcz nie mogą posiadać znacznika końcowego (np. element br służący do rozpoczęcia nowego wiersza tekstu). Element główny każdego dokumentu HTML jest html. Element główny zawiera dwa kolejne elementy: head (nagłówek dokumentu) i body (zasadnicza treść dokumentu). Element head zawiera tytuł strony oraz informacje dodatkowe niewidoczne w dokumencie, takie jak autor, data, słowa kluczowe, itp. Wewnątrz elementu body zawarte są wszystkie pozostałe elementy, mogące zawierać tekst, wstawiać grafikę, itp. Na początku dokumentu, poza elementem html powinna się jeszcze znaleźć informacja o zastosowanym typie dokumentu, wskazująca użytą wersję HTML.

13 Struktura dokumentu <HTML> <HEAD> </HEAD> Nagłówek <BODY> Zasadnicza treść dokumentu </BODY> </HTML>

14 Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci. Dokument HTML jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania grafiki i inne. Lecz pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę.

15 Edytory Windows Pajączek (shareware - płatny), CoreEditor (płatny - dostępna wersja DEMO), Ager Web Edytor (darmowy), EdHTML (darmowy), Edytor Znaczników HTML ezhtml (darmowy), Extra Page (darmowy), HateML Pro (darmowy), ked (darmowy), Kicia (darmowy), SPad (darmowy), WebSite PRO (darmowy), Zajączek (darmowy).

16 Pajączek (shareware - płatny) Najbardziej znany polski edytor HTML rozwijany od lat. Oferuje szerokie wsparcie dla najnowszych technologii internetowych, z których warto wymienić takie jak HTML, XHTML, XML, PHP, JavaScript, VBScript, Perl, MathML, SVG, SMIL, P3P, ASP i inne. Wsparcie to dotyczy nie tylko ułatwionej edycji plików źródłowych w tych językach - program oferuje bowiem kontekstową dokumentację dla wybranego polecenia języka, przeglądanie za pomocą serwera czy funkcję dynamicznego kodu, która uwalnia od konieczności pamiętania poleceń języka.

17 EdHTML (darmowy), Uniwersalny edytor do HTMLa. Wspiera również XHTML, CSS, JavaScript i PHP. Bardzo dobrze koloruje składnię, pozwala na proste testowanie stron we wbudowanych przeglądarkach, pozwala także na testowanie skryptów PHP nie wychodząc z programu. Program zawiera wiele wbudowanych narzędzi, np. kompresor HTML, konwerter polskich znaków itp. Dzięki szablonom i rozbudowanej pomocy pomaga początkującym webmasterom.

18 Edytor Znaczników HTML Dostęp do wszystkich możliwości języka HTML dają zakładki - pomieszczone na nich zostały wszystkie istotne znaczniki. Można także skorzystać z listy znaczników zawierającej wszystkie tagi standardu HTML 4.0. Wiele czynności automatyzują "czarodzieje" i inne kreatory. Warto także zwrócić uwagę na konfigurowalny interfejs (pasek użytkownika, na który można przenieść najczęściej używane polecenia), edytor kolorujący znaczniki oraz inne drobne ułatwienia (np. powtórne wstawienie ostatnio użytego znacznika, podpowiedzi składniowe, automatyczne zamykanie znaczników).

19 Zajączek (darmowy) Dzięki pracy z programem wykorzystanie technologii takich jak PHP, JS, VBS, CSS, XML, SQL stanie się prostsze, a szablony i kreatory przyspieszą pracę nad większymi serwisami. Program umożliwia również tworzenie rozbudowanych graficznie diagramów tworzonych dokumentów.

20 Edytory Linux: Bluefish (darmowy), gedit (darmowy), Kate (darmowy), Quanta Plus (darmowy), SCREEM - Site CRreation and Editing EnvironMent (darmowy). Mac OS X: Bluefish (darmowy), Smultron (darmowy), Taco HTML Edit (darmowy).

21 Edytory Graficzne Istnieją również edytory graficzne, tzw. WYSIWYG (ang. What You See Is What You Get, czyli To Co Widzisz Jest Tym Co Otrzymasz). Jest nim choćby FrontPage dostępny w pakiecie biurowym Microsoft Office. Aby się nimi posługiwać, nie musisz wcale znać języka HTML, ponieważ stronę tworzy się w nich jak w zwykłym edytorze tekstu, a cały kod HTML generuje automatycznie program. Ale nie ma nic za darmo. Takie edytory nie dają Ci pełnej kontroli nad zawartością strony. Możesz korzystać z bogatych narzędzi, lecz czasami nauka wszystkich możliwości takiego edytora, może zabrać więcej czasu, niż nauka podstaw HTML. Dodatkowo generują "nadmiarowy" kod, co zwiększa objętość strony oraz powoduje, że bardzo trudno ją później modyfikować przy użyciu edytorów tekstowych. Poza tym istnieją przypadki, w których znajomość choćby podstaw HTML jest wprost niezbędna.

22 Microsoft FrontPage

23 POLSKIE ZNAKI Przed rozpoczęciem pracy, musisz zaopatrzyć się w czcionki, które pozwolą Ci uzyskać polskie znaki ("ogonki"). Powinny to być koniecznie czcionki w standardzie ISO Jest to powszechnie przyjęty i stosowany w polskim Internecie standard kodowania znaków. Jeśli chcesz używać obcojęzycznego edytora w Windows, który nie potrafi prawidłowo zapisywać polskich znaków w standardzie ISO, przejdź na Polską Stronę Windowsową, a następnie na podstronę: "Klawiatura ISO ". Można tam pobrać darmową klawiaturę Izy Kibord (dla systemu Windows 95/98/Me lub NT4/2000/XP) oraz czcionkę PolskieStrony 2000.

24 POLSKIE ZNAKI <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>pwsbitk</title> </head> <body> </body> </html>

25 Układ strony <HTML> <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> <META NAME="Description" CONTENT="Tu wpisz opis zawartości strony"> <META NAME="Keywords" CONTENT="Tu wpisz wyrazy kluczowe rozdzielone przecinkami"> <META NAME="Author" CONTENT="Tu wpisz swoje imię i nazwisko"> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <TITLE>Tu wpisz tytuł strony</title> </HEAD> <BODY> Tu wpisuje się treść strony </BODY> </HTML>

26 Tu wpisz opis zawartości strony Należy wpisać słowny opis, co znajduje się na Twojej stronie internetowej. Z wiadomości tej korzystają wyszukiwarki sieciowe. Tekst który tutaj wpiszesz, pojawi się w wyszukiwarce, po odnalezieniu przez nią Twojej strony. Jeśli nie wpiszesz tutaj nic, wyszukiwarka wyświetli najczęściej kilka pierwszych linijek, które znajdują się na stronie. Ciekawy, ale niezbyt długi, opis może zachęcić internautów do odwiedzenia Twojego serwisu! Każda pojedyncza strona, która znajduje się w serwisie, powinna mieć swój własny opis, przedstawiający jej treść.

27 Tu wpisz wyrazy kluczowe rozdzielone przecinkami, Należy wpisać słowa kluczowe, których można użyć w wyszukiwarce sieciowej, aby została odnaleziona przez nią Twoja strona. Staraj się tutaj wpisać wyrazy, które jak najlepiej oddają zawartość strony. Wyrazy muszą być oddzielone od siebie przecinkami (np.: wyraz1, wyraz2, wyraz3)! Dobrze dobrane słowa kluczowe, pomogą wyszukiwarkom, w odnalezieniu Twojej strony! Każda pojedyncza strona, która znajduje się w Twoim serwisie, powinna mieć swoje własne wyrazy kluczowe.

28 Tu wpisz swoje imię i nazwisko Jest informacją o autorze strony. Dlatego możesz tu podać swoje imię i nazwisko (choć wcale nie musisz). Jeśli chcesz pozostać anonimowy, wykasuj całą tą linijkę. W opisie zawartości strony, wyrazach kluczowych oraz autorze strony nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: "

29 UWAGA! W żadnym wypadku nie należy pomijać w szablonie: <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso ">

30 Strona startowa Plik będący stroną startową (czyli główną) musi nazywać się index.html lub index.htm. Witryna internetowa może składać się z dowolnej ilości podstron - każda z nich to osobny plik, tworzony w ten sam sposób, jak strona główna. Inne podstrony mogą nazywać się dowolnie, byleby miały rozszerzenie *.html lub *.htm. Jednak stosowanie bardzo długich nazw, może być uciążliwe, szczególnie w przypadku, gdy internauta będzie chciał się bezpośrednio przenieść do którejś z podstron serwisu, poprzez wpisanie jej adresu w przeglądarce (każda strona ma swój unikatowy adres, do którego można się odnosić). UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać: 1. wielkich liter 2. znaków specjalnych (np.: \ / : *? " < > ) 3. spacji (jeśli musisz, w zamian używaj podkreślnika "_") 4. polskich liter (ą, ć, ę, ł, ń... itd.)

31 Umieszczanie tekstu Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu. Nie trzeba przy tym stosować żadnych dodatkowych poleceń. Należy jednak pamiętać, że przeglądarka internetowa automatycznie zawinie wszystkie wiersze, dlatego w edytorze HTML tekst możemy wpisywać dowolnie, np. po wpisaniu: To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst...

32 ZNACZNIKI Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki (tzw. "tagi"). Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, np.: . Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu można ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania (np. wstawienie obrazka). Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: < oraz >. Ponadto znak "&" (ampersand - angielskie "and" - Shift+7) należy zastępować przez: &.

33 Znacznik otwierający i zamykający Istnieją znaczniki otwierające (np.: <CENTER>) oraz zamykające (np.: </CENTER>). Znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak otwierający. Pomiędzy znacznikami otwierającym i zamykającym może znaleźć się jakiś tekst, który chcemy np. poddać formatowaniu (w tym przypadku będzie to wyśrodkowanie tekstu). <CENTER>Ten tekst zostanie ustawiony na środku ekranu.</center>

34 ZNACZNIKI Znacznik otwierający musi znaleźć się zawsze przed znacznikiem zamykającym (co jest chyba dosyć logiczne - nie można zamknąć jeszcze nie otwartych drzwi ani otworzyć nie zamkniętych). Należy również pamiętać, że prawie każdy znacznik (poza nielicznymi wyjątkami) trzeba zamknąć, co oznacza, że nie można zapominać o wstawianiu znaczników zamykających! Nie ma żadnego znaczenia jakimi literami wpisujemy znaczniki, np. znacznik możemy równie dobrze wpisać tak: . Jednak ten drugi sposób jest mało czytelny. Dlatego znaczniki będą pisane dużymi literami.

35 Koniec linii Powyższy znacznik ( ) stosuje się, gdy chcemy natychmiastowo zakończyć linię. Przeglądarka internetowa ignoruje wszelkie znaki przejścia do następnej linii za pomocą klawisza Enter (ignoruje również postawienie obok siebie więcej niż jednej spacji). Na przykład jeśli wpiszesz w edytorze taki tekst: To jest a to jest pierwsza linia... druga linia.

36 Koniec linii Linia zostanie zakończona automatycznie tylko wtedy, gdy podany tekst będzie zbyt długi, aby zmieścić się w jednym wierszu. Jeśli jednak koniecznie chcemy natychmiast zakończyć linię, możemy to zrobić, stawiając w miejscu gdzie ma być ona zakończona, znacznik . Np. wpisanie w edytorze: To jest pierwsza linia... a to jest druga linia.

37 Koniec linii Jeśli postawimy obok siebie więcej niż jeden znacznik , możemy "zejść" kilka linijek niżej, np. wpisanie: To jest pierwsza linia... a to jest druga linia. Znacznik nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)!

38 Paragraf Paragraf (czyli nowy akapit) to pewien ustęp w tekście. Następujące po sobie paragrafy, są rozdzielone linijką przerwy. Treść paragrafu (akapitu) należy wpisać pomiędzy znacznikami oraz . Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w paragrafach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: , można po prostu objąć wybrany fragment tekstu paragrafem, a efekt będzie identyczny. Dzięki temu strona będzie wyglądała estetyczniej i łatwiej będzie można odszukać na niej interesujące informacje.

39 Paragraf Paragraf jest bardzo ważny w składni HTML, ponieważ pozwala w określony sposób sformatować tekst na ekranie (ułożyć go w podany sposób). Robi się to podając atrybuty znacznika. Atrybut wpisuje się zawsze wewnątrz znacznika otwierającego - bezpośrednio po jego nazwie (oddzielony od niej spacją), a przed znakiem zamknięcia nawiasu ostrego, czyli przed ">". Każdy znacznik ma ściśle określone atrybuty, które obsługuje.

40 Paragraf Wyrównanie tekstu do lewej strony (domyślnie): Treść paragrafu lub Treść paragrafu Wyrównanie tekstu do prawej: Treść paragrafu Wyśrodkowanie tekstu: Treść paragrafu Justowanie tekstu (wyrównanie do obu marginesów jednocześnie): Treść paragrafu

41 Paragraf

42 Formatowanie tekstu Tekst pogrubiony Tu wpisz tekst Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold"), który się wewnątrz niego znajduje. Tekst pochylony Tu wpisz tekst Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic"). Tekst podkreślony Tu wpisz tekst Pozwala podkreślić fragment tekstu (ang. "underline"). Wielkość czcionki Tu wpisz tekst Gdzie: "n" należy wpisać wartość od 1 (czcionka najmniejsza) do 7 (czcionka największa).

43 Formatowanie tekstu Kolor czcionki Tu wpisz tekst gdzie: "kolor" podajemy z tabeli black white silver gray maroon red purple fuchsia green lime olive yellow navy blue teal aqua (czarny) (biały) (srebrny) (szary) (kasztanowy) (czerwony) (purpurowy) (fuksja) (zielony) (limonowy) (oliwkowy) (żółty) (granatowy) (niebieski) (zielonomodry) (akwamaryna)

44 Formatowanie tekstu Rodzaj czcionki Tu wpisz tekst lub tu wpisz tekst gdzie: zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu (np.: Tekst). W miejsce kropek można wpisać dalsze rodzaje czcionek, rozdzielone przecinkami (jeśli tego nie zrobimy, kropki należy pominąć). W przypadku drugiego polecenia zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Jest to lepszy sposób, gdyż pozwala się ubezpieczyć na wypadek nieposiadania jednego rodzaju czcionki przez użytkownika.

45 Formatowanie tekstu UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w Internet Explorerze będzie to najprawdopodobniej 'Times New Roman', chociaż to też nie jest pewne).poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie ISO). Koniecznie sprawdź rezultat w praktyce! W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

46 Formatowanie tekstu grupowanie parametrów Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można grupować: Tu jest jakiś tekst Znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni a na końcu zamykamy ten znacznik, który otworzyliśmy jako pierwszy. Dodatkowo atrybuty odnoszące się do tego samego znacznika można połączyć, wypisując je po kolei, rozdzielone spacjami. Kolejność wpisywania zarówno atrybutów jak i znaczników (otwierających) jest dowolna.

47 Formatowanie tekstu i tła <BODY BGCOLOR="kolor tła" TEXT="kolor tekstu"> To jest właściwa treść strony </BODY> Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych atrybutów dla znacznika <BODY>. Atrybuty te (BGCOLOR oraz TEXT) wpisujemy w wewnątrz znacznika otwierającego <BODY> ponieważ nie są one oddzielnymi znacznikami tylko atrybutami. Należy również pamiętać, że na stronie może się znajdować tylko jeden znacznik <BODY>. Wszystkie atrybuty które się do niego odnoszą, wpisuje się do tego samego znacznika (otwierającego), a nie wstawia się nowego w innym miejscu strony. Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie. Nawet jeśli ustalimy kolor tekstu na całej stronie, możemy go później lokalnie (miejscowo) zmieniać za pomocą polecenia ...

48