PODSTAWY HTMLStronę WWW /lub zespół stron tworzących witrynę WWW/ można przygotować na swoim lokalnym komputerze przy pomocy graficznego lub tekstowego edytora HTML, czyli specjalnego programu ułatwiającego przygotowywanie stron, albo przy pomocy zwykłego edytora tekstowego zapisującego pliki w formacie ASCII. Dla systemu Windows 9X/NT może to być program NOTATNIK lub przygotowany w języku polskim - EDITPAD. Ważne jest, aby edytor nie stosował swojego specyficznego formatu zapisu, a tylko standardowe ASCII. Najważniejsze to to, by główna strona, od której "internauta" rozpoczyna oglądanie stron przez Ciebie przygotowanych zapisana została w pliku o nazwie index.html. Pozwala to na wygodne adresowanie i zapobiega pojawianiu się spisu plików w katalogu zamiast samej strony /jest to uwarunkowane specyfiką systemu operacyjnego UNIX/LINUX na których pracuje większość serwerów internetowych/. Jeśli łączysz sie z adresem : http://www.wodip.opole.pl/~nazwa_konta, a więc podajesz sam katalog szkoły lub prywatny na naszym serwerze, to jeżeli nie ma w tym katalogu pliku o nazwie index.html - ujrzysz komunikat o błędzie. Jeśli jednak plik o wspomnianej nazwie znajduje się w katalogu PUBLIC_HTML /katalog na koncie użytkownika posiadającego konto na serwerze WODIiP do którego należy skopiować wszystkie pliki swojej strony, czy witryny : *.html, *.gif, *.jpg, *.mid, .../, automatycznie ładowana jest strona index.html w nim umieszczona. Innym problemem może być rozbieżność między nazewnictwem plików WINDOWS-owych oraz UNIX-owych. Plik zawierający stronę WWW powinien mieć (dobrze by było, gdyby miał) rozszerzenie .html. Rozwiązanie jest proste - w treści strony umieszczasz odsyłacze do nazw innych plików HTML-a /jeśli istnieją/ w postaci *.htm. Przy przesyłaniu strony na serwer zmienisz rozszerzenie głównego pliku o nazwie index.htm na index.html, a resztę pozostawisz bez zmian. Ważne jest, by wszelkie nazwy plików, do których odwołujesz się na swoich stronach pisane były małymi literami, bez spacji w nazwie oraz bez podawania ścieżki dostępu na swoim prywatnym dysku /tak właśnie zapisują edytory graficzne jeśli nie przestrzegasz określonych zasad. Szablon strony WWWPolecenie /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ń. 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 :
Tak spreparowany szkielet jest już "bezpieczny" i nie niesie ze sobą ryzyka jakichś niespodzianek. Gdy już wiemy, jaka jest formalna osnowa dokumentu, warto jeszcze dodać kilka użytecznych informacji. Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE> </TITLE>.
TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Na przykład :
Proszę zwrócić teraz uwagę na pasek tytułowy przeglądarki,
gdzie widnieje treść "Język HTML - poradnik dla początkujących"
Ostatecznie więc, stosuj na początku standardową osnowę:
Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor, jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary). Możemy wstawić polecenie:
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. TytułyW dokumentach często wprowadzamy 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. Niektóre polecenia można używać w obu postaciach, choć coraz powszechniejsze używanie stylów wymusza ostatnio bardziej rygorystyczne stosowanie znaczników zamykających (np. akapit). Podkreślmy od razu, że znaczniki w przeglądarce WWW nie są wyświetlane. Są one jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst. Uwaga: Powszechnie używany termin "nagłówek" jest nieco mylący. Aby nie było kłopotu z rozróżnianiem tytułu i nagłówka dokumentu, przyjmujemy właśnie pojęcie "tytuł". Jest ono zresztą bardziej intuicyjne, gdyż kojarzy się z tytułami rozdziałów i podrozdziałów w obszernych dokumentach, a taka jest jego istota. Jak wspomnieliśmy wyżej, dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością znaków. Wprowadzamy je za pomocą poleceń H1, H2 itd. Akapit /paragraf/ i wierszJak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter, przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby naprawdę rozdzielić akapity, należy się posłużyć poleceniem <P> (P = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne stosowanie znacznika zamykającego </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>, które przenosi tekst o jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii. To jest pierwszy wiersz<BR> Pozioma liniaNastę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. Zauważ, że w tym dokumencie bloki informacji są rozdzielane właśnie poziomymi liniami. Wykazy /listy/Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu systematyczne wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakterze 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 numerowanych i list wypunktowanych. 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>
W efekcie uzyskamy : Dlaczego zajmuję się UFO?
Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika <LI>, czy też zastosujemy dodatkowo znacznik zamykający </LI>. Autorzy edytorów HTML stosują różne konwencje, a wynik w przeglądarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca się zamykanie znaczników. Gdy chcemy utworzyć wykaz numerowany, 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).
Atrybuty czcionkiAby 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:
Odsyłacze hipertekstowe /linki/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. 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 najpowszechniej stosowane. 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="http://www.pckurier.pl">PCkurier</A> 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: zalecamy nadawanie stronie głównej serwisu nazwy index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html /dla serwerów opartych na systemie Windows NT/ 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. 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 poprawność składni. Edytory HTML na ogół respektują ten wymóg (choć nie wszystkie). Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron, którzy dysponują przecież zazwyczaj swoim własnym adresem, wstawiają go na stronie, prosząc o uwagi czytelnika (ale rzadko to czynią autorzy stron z informacjami dla hackerów!). 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 jakaś osoba wstawiła swój adres w postaci : <A HREF="mailto:janko@wodip.opole.pl">Jan Kowalski</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ś skorzysta z Outlook Express (albo np. z Outlook 98, jeśli jest on domyślnym programem pocztowym). Także i tutaj stosujmy konsekwentnie w adresie cudzysłów. Fragment w postaci : ... Jeśli masz jakieś uwagi, napisz do <A HREF="mailto:stan@wodip.opole.pl">autora strony</A> zostanie przedstawiony w przeglądarce następująco : Jeśli masz jakieś uwagi, napisz do autora strony Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w pasku stanu adres poczty elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w którym czytelnik strony będzie mógł zredagować list do autora. Wielkość i kolor czcionkiGdyby 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 dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w edytorach 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 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. Oto przykłady odmiennych wielkości czcionki w przeglądarce World Wide Web. To jest czcionka o wielkości 7 Polecenie, które określa wielkość czcionki, ma następującą postać:
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 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> 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. W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się tutaj poleceniem:
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. Niektóre z edytorów pozwalają wybrać barwę za pomocą suwaków i wstawiają odpowiedni kod do edytora. Można się również posłużyć specjalnym programem do wyznaczania tych wartości - w Internecie można znaleźć kilka robiących to aplikacji. 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, zaś ostatnio 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 najwygodniejszą metodą ich definiowania, ponieważ przeglądarki Netscape i Microsoftu zdominowały rynek, więc znaczna część czytelników strony będzie widziała właściwe kolory. Oto lista szesnastu podstawowych barw: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Grafika na stronach WWWStrony 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="../images/wodip.gif"> Podstawowe znaczniki /tagi/ języka HTML.Poniżej znajdziesz spis wybranych znaczników języka HTML. Większość
z nich może być używana wielokrotnie w treści jednej strony. Można
dokonywać kombinacji różnych poleceń łącząc je ze sobą ... tekst
może być jednocześnie
wykorzystano materiały "Kursu HTML" Pawła Wimmera |
