HTML dla początkujących

1 HTML dla początkującychOpracował: M. Kwiesielewicz ...
Author: Jozafat Praski
0 downloads 2 Views

1 HTML dla początkującychOpracował: M. Kwiesielewicz

2 Tworzenie dokumentu HTMLDokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Dokument taki można utworzyć za pomocą najprostszego edytora tekstów, ręcznie dodając znaczniki Wiele specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Osobiście polecam używanie edytorów tekstowych, a nie graficznych - lepsza kontrola nad tworzonym dokumentem

3 Programy w środowisku Windows 95/98HomeSite, w wersjach od 2.x do 4.x - jeden z najlepszych edytorów w tym środowisku Pajączek 2000 Tiger98 - także polski, bardzo silny edytor HotDog od 3 do 5 - silny, ale dość trudny w obsłudze WebEdit 3 - jeden z najlepszych programów w tym środowisku WebPager Xpress - polski edytor, nieco słabszy od wyżej wymienionych, ale darmowy ezHTML - polski edytor, także darmowy

4 Dla początkujących Można się posłużyć graficznymi edytorami,Dla początkujących poleca się szczególnie darmowe edytory dołączone do przeglądarek Internet Explorer i Netscape Communicator (lub Sylaba Komunikator). Do nauki języka HTML, warto się posługiwać edytorami tekstowymi

5 Osnowa dokumentu Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi. Gdybyśmy na przykład chcieli zaznaczyć jakiś fragment tekstu jako tytuł, moglibyśmy objąć go poleceniem

treść tytułu

. 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.

6 Szkielet dokumentu HTMLWszystkie polecenia powinny się znaleźć w pewnych standardowych ramach. Zostało przyjęte, że dokument HTML zawiera szkielet, który stanowi osnowę dla wszystkich innych poleceń. Cały dokument powinien być objęty parą znaczników . Między nimi powinna zaś się znaleźć para znaczników , która stanowi ramy dla informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami .

7 Przykład „bezpiecznego” szkieletuHTML> informacje nagłówkowe właściwa treść (ciało) dokumentu

8 Tytuł strony Między znacznikami i powinno się znaleźć polecenie . Tytuł strony TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki: Kurs języka HTML - poradnik webmastera: HTML dla bardzo początkujących

9 Informacja o stronie kodowej dokumentuZalecane jest strony kodowej ISO (czyli ISO Latin 2). Jest to międzynarodowy standard, a "przy okazji" także Polska Norma. Należy sporządzać dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona umieszczana w ramach znaczników HEAD i wygląda następująco:

10 Standardowa osnowa Tytuł strony właściwa treść (ciało) dokumentu

11 Polskie znaki w edytorachCzołowe polskie edytory HTML nie wymagają już stosowania odrębnych klawiatur i czcionek ekranowych, gdyż same automatycznie konwertują polskie znaki do wybranej przez nas strony kodowej. Edytory produkcji zachodniej (ISO ) Czcionki TrueType na polskiej stronie "ogonkowej", pod adresem Windows darmowe czcionki ekranowe PolskieStrony i PolskieStrony2, dostępne w serwisie Polska Strona Windowsowa HomeSite 2.5 (lub nowszy) należy zalecać używanie czcionki PolskieStrony2. Należy również używać nakładki klawiaturowej dla ISO Problem konwersji już istniejących dokumentów można załatwić za pomocą specjalnych programów

12 Kodowanie - podsumowanie (ISO-8859-2)Zaopatrz się w dowolną czcionkę ekranową w standardzie ISO , za pomocą której będziesz wyświetlać tekst dokumentu w edytorze HTML Używaj polskiej klawiatury w standardzie ISO Wstaw deklarację strony kodowej ISO w nagłówku dokumentu

13 Kodowanie - podsumowanie Windows-1250 (nie zalecany)Użyj dowolnej czcionki ekranowej w tym standardzie (jest ich sporo w Windows) Używaj standardowej klawiatury Windows Wstaw deklarację strony kodowej Windows-1250 w nagłówku dokumentu

14 Kodowanie ISO w WindowsWstawić do sekcji [PolKeyb] w WIN.NI, zapisać plik na dysku i ponownie uruchomić Windows. Fragment WIN.INI powinien wyglądać następująco: [PolKeyb] settings= name0=ISO keys0=ACELNOSXZ lower0=177,230,234,179,241,243,182,188,191 upper0=161,198,202,163,209,211,166,172,175

15 Kolor tła dokumentu Gdy w dokumencie znajduje się para znaczników i , możemy zdefiniować kolor tła dokumentu: przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości heksadecymalnych tak jak w przypadku koloru czcionki - #FF0000, #008000, #000000, #FFFFFF. Sugeruje się używanie wartości heksadecymalnych, jako bardziej uniwersalnych

16 Tytuły W dokumentach często wprowadzamy tytuły.Służy do tego polecenie . 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

i zamykającego

. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Wprowadzamy je za pomocą poleceń H1, H2 itd.

17 Akapit i wiersz 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 = paragraph), które wstawi interlinie między poszczególne fragmenty tekstu. Zaleca się także konsekwentne stosowanie znacznika zamykającego

. Przykład:

To jest treść pierwszego akapitu

To jest treść drugiego akapitu

18 Przełamanie tekstu Chcemy przełamać tekst, nie wprowadzając przy tym znaku końca akapitu. Pojedyncze polecenie
przenosi tekst o jeden wiersz w dół, nie wprowadzając dodatkowej interlinii. To jest pierwszy wiersz
 To jest drugi wiersz
 To jest trzeci wiersz
 To jest czwarty wiersz
 Ponadto polecenie
ma jeszcze jedną zaletę. Napisanie kilku kolejnych
pozwala poszerzyć pionowy odstęp między elementami.

19 Pozioma linia Poziomą linie, wstawiamy za pomocą polecenia

(ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię, na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu

20 Wykazy Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia

(ang. unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które wprowadzamy za pomocą polecenia

  • 21 Przykład wykazu W efekcie uzyskamy:

    Dlaczego zajmuję się UFO?

    • Uważam, że UFO istnieje
      •
    • Uważam, że pozaziemskie cywilizacje mogą nam pomóc
      •
    • Uważam, że należy się przygotować na spotkanie
      •
    W efekcie uzyskamy: Dlaczego zajmuję się UFO? Uważam, że UFO istnieje Uważam, że pozaziemskie cywilizacje mogą nam pomóc Uważam, że należy się przygotować na spotkanie

    22 Wykazy numerowane Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast

      i
    możemy zastosować
      i
    (ang. ordered list). Uzyskamy wówczas listę numerowaną za pomocą liczebników arabskich 1. Uważam, że pozaziemskie cywilizacje mogą nam pomóc 2. Uważam, że należy się przygotować na spotkanie

    23 Atrybuty czcionki Atrybuty czcionki - pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined). Przykłady To jest tekst pogrubiony (bold) To jest tekst pochylony (italic, kursywa) To jest tekst podkreślony (underlined) Choć wszystkie przeglądarki akceptują atrybuty czcionki, warto zauważyć, że np. Netscape Navigator 2 i 3 ignoruje podkreślenie, natomiast Netscape Communicator 4 już je widzi.

    24 Odsyłacze Czytelnik dokumentu będzie 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. Odsyłacz do innej strony jest tworzony za pomocą polecenia: Jakaś nazwa tej strony Przykładowy adres mógłby wyglądać następująco: PCkurier

    25 Odsyłacze uwagi 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). Zaleca się nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także default.htm lub default.html Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami i . Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy to jednak zmienić).

    26 Adres poczty jako odsyłaczStosujemy tutaj na przykład następujące polecenie: Na przykład na stronie PCkuriera prowadząca ją osoba wstawiła swój adres w postaci:

    27 Wielkość i kolor czcionkiW dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w edytorach tekstów Podstawowa czcionka ma wielkość 3 jednostek (zazwyczaj czcionka 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.

    28 Polecenie określające wielkość czcionkiNadanie wartości absolutnej Tekst objęty definicją x = 1...7 Nadanie wartości względnej Tekst objęty definicją Tekst objęty definicją x = 1...6 Gdy jakiś fragment tekstu obejmiemy definicją , będzie on miał wielkość 5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia , tekst będzie miał wielkość 2. W ten sposób możemy manipulować wysokością czcionki w tekście.

    29 Polecenie określające kolor czcionkiSkładnia polecenia Tekst objęty 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).

    30 Grafika na stronie Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. 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. Grafikę możemy wprowadzić za pomocą polecenia: , np..:

    31 Wstawienie grafiki do dokumentuPodstawowa konstrukcja ma następującą postać: Wielkość obrazka możemy regulować za pomocą parametrów HEIGHT (wysokość) i WIDTH (szerokość). Na przykład: HEIGHT=50> Ramka (border w pikselach)

    32 Wstawienie grafiki do dokumentuParametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego go tekstu: Odrębny, specjalny zespół parametrów, ALIGN=abc, steruje pozycją obrazka w stosunku do oblewającego go akapitu wartości parametru: right, left, top, bottom, middle

    33 Wstawienie grafiki do dokumentuJeśli chcemy, aby osoby korzystające z Internetu w trybie tekstowym wiedziały, co zawiera obrazek, możemy wstawić dodatkowo parametr ALT="informacja". Napis ten zostanie wyświetlony na ekranie przeglądarki tekstowej. Informacja jest ważna wówczas, gdy grafika zawiera odsyłacze do innych stron. Gdybyśmy chcieli umieścić obrazek na środku wiersza, musimy objąć go znacznikami

    Obrazek można oczywiście umieścić w komórce tabeli, wstawiając między znacznikami komórki definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań

    34 Tablice Ogólne ramy tabeli

    Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn. Wiersz tabeli Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi. W ramach
    można umieścić wiele kolejnych definicji wierszy

    35 Tablice Komórka w wierszu Komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład:

    36 Obramowanie tablic Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o parametr BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

    Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę

    37 Obramowanie i marginesy komórekObramowanie komórek Aby komórki (nie tabela!) zawierały inne obramowanie niż domyślne, możemy użyć parametru CELLSPACING (de facto jest to odległość między komórkami).

    Marginesy dla komórek Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1).

    38 Szerokość i wysokość tablicyDotychczas tworzone tablice, przybierały domyślną szerokość. Parametr WIDTH daje nam możliwość zdefiniowania szerokości tabeli i jest "silniejszy" od innych parametrów, które wpływają na

    Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki.
    Możemy zdefiniować wysokość tablicy (nie wchodzi w skład HTML 4.0), podając parametr HEIGHT, wyrażony w pikselach lub procencie widocznej strony. W poniższym przykładzie zostały użyte parametry

    39 Szerokość komórki Parametr WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki, umieszczając go w ramach definicji wybranej komórki, np.

    .Można też podać wartość procentową, która odnosi się do szerokości komórki w ramach tabeli, a nie całego ekranu (akceptują ją Navigator i Internet Explorer, ale HTML 4.0 zaleca unikania tego polecenia).

    40 Wyrównanie tablicy Parametr ALIGN pozwala wyrównać tabelę w stosunku do marginesów strony i oblewającego ją tekstu, na przykład:

    41 Poziome wyrównanie danych w komórkachParametr ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - środkowania, justowania do lewej i justowania do prawej. Używamy wówczas odpowiednio konstrukcji . Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy szerokość komórki za pomocą WIDTH.

    42 Pionowe wyrównanie danych w komórkachParametr VALIGN (vertical) służy do pionowego wyrównania zawartości komórki - do górnego brzegu, do środka i do dolnego brzegu. Używamy wówczas odpowiednio konstrukcji: . Wyrównanie jest wyraźnie widoczne, gdy samodzielnie zdefiniujemy wysokość tabeli za pomocą HEIGTH.

    43 Kolor dla tablicy Microsoft Internet Explorer i Nescape Communicator pozwalają wykorzystać kolor tła tabeli (HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów). W tym celu należy w definicji tabeli dodać parametr , np.

    Kolory - Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, Green, Purple, Silver , Yellow, AquaMożemy również "pomalować" poszczególne komórki, wstawiając definicję koloru w ramach definicji komórek, np. TD BGCOLOR="barwa" - HTML 4.0 zaleca rezygnowanie z tego polecenia na rzecz stylów.Jako tła tabeli (czy wręcz poszczególnych komórek) można także użyć gotowego obrazka, stosując polecenie (HTML 4.0 nie przewiduje stosowania tego polecenia w tym kontekście - możemy jednak stosować style):

    44 Obramowanie tablicy Kolor obramowania tabeliInternet Explorer i Navigator interpretują także kolor obramowania tabeli. W definicji tabeli należy wstawić parametr , np.

    .Odcień obramowania tabeliInternet Explorer i Navigator pozwalają określić kolor cienia obramowania tabeli. Możemy nadać odrębną barwę cieniowi lewemu i górnemu oraz odrębną prawemu i dolnemu. Na przykład:

    45 Cień w wierszu i komórceDefinicję cienia możemy nawet zastosować w wierszu lub w pojedynczej komórce, na przykład:

    .

    50 Tablice - nagłówek ciało i stopkaPodobnie jak cały dokument, także i tablica może mieć swoją część nagłówkową, część główną i stopkę. Elementy te są (teoretycznie) przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli: Wydzielenie nagłówka i stopki pozwoli wyświetlać zawsze na ekranie zawarte w nich informacje, gdy tabela przekracza wielkością ekran. Przewijana jest tylko główna część tabeli (dane), a informacje nagłówka i stopki pozostają cały czas widoczne. Analogicznie, gdybyśmy drukowali większą tabelę, która nie mieści się na jednej stronie druku, nagłówek i stopka tabeli będą drukowane na każdej kolejnej stronie, a zmieniać się będą oczywiście dane zawarte w BODY. Na razie ani Internet Explorer, ani Navigator nie interpretują w ten sposób nagłówka i stopki tabeli. Wydzielenie części tabeli pozwala, razem z grupami kolumn, definiować obramowanie.

    51 Przykład struktury tablicy

    46 Podpis pod tablicą Tablica powinna na ogół zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólną definicją tabeli. Na przykład:

    Microsoft Internet Explorer pozwala dodatkowo dosunąć podpis do lewej lub prawej strony, przy użyciu parametru VALIGN. Na przykład:
    Tytuł tabeli umieszczony u góry

    47 Nagłówek wiersza i kolumnyDomyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej. Nagłówek jest definiowany za pomocą parzystego kodu

    . Tak więc, aby sporządzić tabelicę z wierszem nagłówków kolumn i wierszem danych, należy wprowadzić np. następujący kod:
    Tytuł tabeli umieszczony u góry
    Wzrost produkcji w latach (w mln USD)
    1991 19921993 1994 1995
    11501240138014201550

    48 Łączenie komórek Komórki danych i nagłówków można ze sobą łączyć.Aby komórka w danym wierszu rozciągała się na x kolumn, należy użyć w jej definicji parametru

    		. Podobnie można łączyć komórki z nagłówkami .

    49 Zagnieżdżanie tablic Możliwe jest zagnieżdżanie tablic w komórkach nadrzędnej tablicy. W tym celu należy utworzyć w zwykły sposób definicję tabeli w ramach definicji wybranej komórki tabeli nadrzędnej, czyli w ramach

    To jest część nagłówkowaTo jest stopka
    Komórka 11
    Komórka 21
    Znaczniki zamykające są opcjonalne we wszystkich trzech poleceniach.

    52 Animacja (interpretowana jedynie przez Microsoft Internet Explorer )Minimalna definicja Marquee ma postać Tekst animacji. Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. Animację można wstawiać także do komórki tabeli, między znaczniki Tekst może się poruszać na trzy sposoby BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się

    53 Parametry animacji BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua. Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo. Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu. Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy

    54 Parametry animacji Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu. Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE. Jak wiemy, definicja koloru fragmentu tekstu ma postać Tekst . Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu

    lub końca wiersza
    .

    55 Parametry animacji Pola animacji można bezpośrednio ze sobą łączyć.Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy. Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami = 1 sekunda. Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją.

    56 Dźwięk, wideo, VRML Możliwe jest tworzenie odsyłaczy do plików dźwiękowych, aczkolwiek, co ciekawe, dokumentacja HTML 4 właściwie milczy na temat dźwięku! Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Przykłady: Plik dźwiękowy WAV (styl Netscape) - Plik dźwiękowy WAV (styl Microsoft) Plik dźwiękowy MIDI (styl Netscape) -