PODSTAWY TWORZENIA STRON WWW W HTML’u Opracowała: mgr inż. Grażyna Gołąbek-Tomas
SCHEMAT STRONY Strukturę dokumentu w HTML określa się za pomocą znaczników. Znaczniki są następnie odpowiednio interpretowane i wyświetlane przez przeglądarkę. Zapisuje się je WIELKIMI literami w nawiasach kątowych < >. Ich składnia jest następująca: <ZNACZNIK>Moja pierwsza strona</ZNACZNIK> Znaczniki wymagają czasem zamknięcia - do tego celu wykorzystujemy prawy ukośnik "/" tzw. "slash". Każdy dokument napisany w HTML rozpoczyna się znacznikiem <HTML>, zaś kończy </HTML>. Pomiędzy tymi znacznikami znajduje się treść dokumentu. Ta z kolei podzielona jest na dwie części nagłówek <HEAD> i część główną, tzw. ciało <BODY>. Nagłówek wykorzystywany jest jako opis pliku, zaś w części głównej dokumentu umieszcza się właściwą zawartość strony. Zatem otwierając pusty plik w edytorze umieszczamy w nim zapis o następującej składni: <HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>
cd.SCHEMAT STRONY Każda strona WWW powinna zawierać tytuł, który będzie wyświetlany na górnym niebieskim pasku okna przeglądarki (pasku tytułowym). Dzięki niemu użytkownik będzie wiedział, na jakiej stronie aktualnie się znajduje.Zwartość tytułu jest ponadto wykorzystywana do poszukiwania dokumentów w sieci przez wyszukiwarki. Tytuł dokumentu umieszczamy w nagłówku strony pomiędzy znacznikami <HEAD> i </HEAD>. Do tego celu wykorzystamy nowy, bardzo łatwy do zapamiętania znacznik: <TITLE> <TITLE>Moja pierwsza strona</TITLE> Tak więc schemat naszej strony wygląda następująco: <HTML> <HEAD> <TITE> MOJA STRONA </TITLE> </HEAD> <BODY> ... </BODY> </HTML>
FORMATOWANIE TEKSTU Przeglądarka internetowa całkowicie ignoruje wstawiane znaki tabulacji, wielokrotne spacje czy też znaki końca akapitu. Chcąc rozdzielić akapity, należy posłużyć się znacznikiem <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. Ponadto polecenie <BR> ma jeszcze jedną zaletę. Napisanie kilku kolejnych <BR> pozwala poszerzyć pionowy odstęp między elementami. Znacznik ten nie wymaga zamknięcia. Do pogrubienia tekstu na stronie służą znaczniki <B> tekst pogrubiony </B> Do podkreślenia tekstu na stronie służą znaczniki <U> tekst podkreślony </U> Do pochylenia tekstu służą znaczniki <I> kursywa </I> Do przekreślenia tekstu służą znaczniki <STRIKE> … </STRIKE> tekst pisany czcionką o stałej szerokości (czcionka maszyny do pisania) umieszczamy w znacznikach <TT> … </TT>
NAGŁÓWKI NA STRONIE WWW W 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>. <H1> to wielkość największa, a <H6> to wielkość najmniejsza. <H1> NAGŁÓWEK STOPNIA 1 </H1> <H2> NAGŁÓWEK STOPNIA 2 </H2> <H3> NAGŁÓWEK STOPNIA 3 </H3> <H4> NAGŁÓWEK STOPNIA 4 </H4> <H5> NAGŁÓWEK STOPNIA 5 </H5> <H6> NAGŁÓWEK STOPNIA 6 </H6>
WSTAWIAMY KOLORY tło ma taki kolor, jaki został domyślnie przyjęty przez przeglądarkę WWW. Chcąc je zmienić musimy zmodyfikować sekcję <BODY> i posłużyć się następującym poleceniem: <BODY BGCOLOR="angielskanazwakoloru"> Kolor możemy określić w formacie RRGGBB lub za pomocą jego angielskiej nazwy. W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się wówczas poleceniem: <FONT COLOR="angielskanazwakoloru">Tekst objęty poleceniem</FONT> Należy zwrócić uwagę, iż znacznik <FONT> musi zostać zamknięty. W przeciwnym razie cały tekst od tego miejsca będzie takiego koloru jaki zdefiniujemy. w przypadku określania koloru tła dla strony oraz tekstu możemy używać wartości heksadecymalnych: <FONT COLOR="rrggbb">Tekst objęty poleceniem</FONT> Używanie wartości heksadecymalnych jest bardziej uniwersalne, należy pamiętać o umieszczeniu znaku # (hash). Dobieramy kolory tak, aby adresat Twojej strony nie zniechęcił się już na wstępie. Żółty tekst na białym tle nie świadczy zbyt dobrze o jego autorze.
LISTA SZESNASTU PODSTAWOWYCH BARW black #000000 fuchsia #FF00FF silver #C0C0C0 green #008000 gray #808080 lime #00FF00 white #FFFFFF olive #808000 maroon #800000 yellow #FFFF00 red #FF0000 navy #000080 purple #800080 blue #0000FF teal #008080
WIELKOŚĆ CZCIONKI Chcąc zmienić wielkość czcionki używamy znacznika: <FONT SIZE="x"> TEKST</FONT>. gdzie: x - jest bezwzględną wartością czcionki. Czcionka standardowa ma przypisaną wartość 3 (nie należy mylić jej ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7. Chcąc zmienić kolor czcionki używamy znacznika: <FONT COLOR="#rrggbb"> TEKST </FONT> <FONT FACE="nazwa czcionki"> Przykładowy tekst </FONT> Pozwala ono zmienić krój czcionki dla danego dokumentu Przykładem indeksu dolnego jest cyfra 2 we wzorze H2O. Tekst wpisany mniejszymi i niżej położonymi literami można sformatować za pomocą znacznika <SUB> </SUB> (subscript). H<SUB>2</SUB>O Przykładem indeksu górnego jest liczba 10 w wyrażeniu 210. Tekst wpisany mniejszymi i wyżej położonymi literami można sformatować za pomocą znacznika <SUP> </SUP> (superscript). 2<SUP>10</SUP>
LISTY NUMEROWANE i jego efekt działania Przykład kodu źródłowego: <OL> <LI>Poniedziałek <LI>Wtorek <LI>Środa <LI>Czwartek <LI>Piątek <LI>Sobota <LI>Niedziela </OL> i jego efekt działania 1. Poniedziałek 2. Wtorek 3. Środa 4. Czwartek 5. Piątek 6. Sobota 7. Niedziela
LISTY WYPUNKTOWANE Poniedziałek Wtorek Środa Czwartek Piątek Sobota Przykład kodu źródłowego: <UL> <LI>Poniedziałek <LI>Wtorek <LI>Środa <LI>Czwartek <LI>Piątek <LI>Sobota <LI>Niedziela </UL> i jego efekt działania Poniedziałek Wtorek Środa Czwartek Piątek Sobota Niedziela
TABELE NA STRONIE WWW Jednym z podstawowych elementów służących do formatowania tekstu są tabele. Mają one dwojakie zastosowanie. Po pierwsze umożliwiają tworzenie obszarów składających się z wierszy i kolumn. Drugim zastosowaniem tabel jest organizacja wyglądu strony m.in. w połączeniu z obrazkami i formularzami. Do definicji tabeli służy znacznik <TABLE> </TABLE>. Tabela składa się z wierszy oznaczanych znacznikami <TR> </TR>. Poszczególne wiersze składają się z komórek <TD>. Szczególnym przypadkiem komórki jest nagłówek kolumny oznaczony jako <TH>. Jest on wyświetlany pogrubioną czcionką. Najprostszy przykład reprezentujący tabelę bez obramowania wygląda następująco: <TABLE> <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE>
TABELE Z OBRAMOWANIEM Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję znacznika <TABLE> o atrybut BORDER. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <TABLE BORDER> <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE>
FORMATOWANIE TABELI Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: <TABLE BORDER=5> <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE> 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ć atrybutu CELLPADDING (domyślnie wynosi on 1). <TABLE BORDER=5 CELLPADDING=10> <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE>
FORMATOWANIE TABELI Szerokość tabeli: Atrybut WIDTH daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. <TABLE BORDER=5 WIDTH=600 CELLPADDING=10> <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE> Zamiast wartości absolutnej w pikselach możemy także użyć wartości procentowej, np. pół szerokości ekranu przeglądarki. <TABLE BORDER=5 WIDTH="50%" CELLPADDING=10> <TR><TH>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE>
FORMATOWANIE TABELI Atrybut WIDTH możemy wykorzystać także de zdefiniowania szerokości komórki <TABLE BORDER=5 CELLPADDING=10> <TR><TH WIDTH=250>...<TH>...</TR> <TR><TD>...<TD>...</TR> <TR><TD>...<TD>...</TR> </TABLE> Atrybut ALIGN możemy także wykorzystać do poziomego wyrównania zawartości komórki - wyśrodkowania, wyrównania do lewej i wyrównania do prawej. Używamy wówczas następującego zapisu: <TD ALIGN="center"> <TD ALIGN="left"> <TD ALIGN="right"> Atrybut 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 następującego zapisu:
FORMATOWANIE TABELI <TD VALIGN="top"> <TD VALIGN="middle"> <TD VALIGN="bottom"> W celu ustawienia koloru tła tabeli należy w definicji tabeli dodać atrybut BGCOLOR="barwa", np. <TABLE BORDER HEIGHT=200 BGCOLOR="#FAF5DC"> W celu ustawienia koloru obramowania tabeli należy wstawić atrybut BORDERCOLOR="barwa", np. <TABLE BORDER=5 BORDERCOLOR="#996600"> Komórki danych i nagłówków można ze sobą łączyć. w poziomie: <TABLE BORDER=5 CELLPADDING=10 WIDTH=200> <TR><TD COLSPAN=2>Klasy</TR> <TR><TD>Ia<TD>Ib</TR> <TR><TD>IIa<TD>IIb</TR> </TABLE> w pionie: <TABLE BORDER=5 CELLPADDING=10 WIDTH=200> <TR><TD>Grupa<TD>Klasa</TR> <TR><TD ROWSPAN=2>Chłopcy<TD>Ia</TR> <TR><TD>IIa</TR> </TABLE>
GRAFIKA NA STRONIE Podstawowymi elementami graficznymi stron WWW są pliki typu JPG (Joint Photographic Expert Group), GIF (Graphics Interchange Format) lub PNG (Portable Network Graphics). Osadzenie takiego "obrazka" dokonuje się za pomocą znacznika <IMG>. Jego najważniejszym atrybutem jest SRC, który wskazuje adres pliku. <IMG SRC="nazwa.gif"> Wielkość obrazka możemy regulować za pomocą atrybutów HEIGHT (wysokość) i WIDTH (szerokość). <IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%”> atrybut BORDER=x pozwala wyświetlić wokół obrazka ramkę o grubości równej x pikseli <IMG SRC="nazwa.gif” HEIGHT=‘’40%” WIDTH=‘’50%” BORDER=6> Obrazek można również umieścić w komórce tabeli, wstawiając między znacznikami komórki <TD> </TD> definicję obrazka, co można wykorzystać do tworzenia efektownie wyglądających obramowań,
ANIMACJE Efektownym elementem graficznym jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis. Animacji można przypisać wiele atrybutów, które bardzo urozmaicają zachowanie napisu. Minimalna definicja Marquee ma postać: <MARQUEE>Tekst animacji</MARQUEE> Dodatkowe atrybuty są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE Atrybut="wartość">. Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD> Tekst może się poruszać na trzy sposoby: BEHAVIOR="scroll" - powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR="slide" - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się. BEHAVIOR="alternate" - powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego. Tekst może się poruszać na kolorowym tle: BGCOLOR="angielskanazwakoloru" - pozwala określić kolor tła dla pola, po której porusza się napis. Kolor można podać w postaci heksadecymalnej ("#RRGGBB") lub słownej ("red").
MULTIMEDIA Elementy multimedialne są jednymi z najbardziej charakterystycznych elementów World Wide Web, ogromnie ubarwiając i uprzyjemniając pracę w sieci, ale także dostarczając sporej dawki informacji. Zazwyczaj stosuje się dwa typy odsyłaczy - styl Netscape i styl Microsoftu. Plik dźwiękowy WAV (styl Netscape) <EMBED SRC="plik.wav" BORDER="0" WIDTH="x" HEIGHT="y"> Plik dźwiękowy WAV (styl Microsoft) <BGSOUND SRC="plik.wav" LOOP="infinite"> Plik dźwiękowy MIDI (styl Netscape) <EMBED SRC="plik.wav" BORDER="0"> Plik dźwiękowy MIDI (styl Microsoft) <BGSOUND SRC="plik.mid" LOOP="1"> Plik wideo AVI (styl Netscape) <EMBED SRC="plik.avi" BORDER="0"> Plik wideo AVI (styl Microsoft) <IMG BORDER="0" ALT="opis elementu" DYNSRC="plik.avi" LOOP="infinite" START="fileopen">
ODSYŁACZE Odsyłacze umożliwiają powiązanie dokumentów na tym samym serwerze, w tym samym mieście, kraju czy kontynencie. Dzięki odsyłaczom można wiązać ze sobą poszczególne strony. Przypomina to trochę czytanie książki, w której autor odwołuje się do informacji (np. ilustracji) zamieszczonej na jej końcu. Odsyłaczem do etykiety nazywamy odnośnik (odsyłacz) do elementu znajdującego na tej samej stronie. Jego konstrukcja jest następująca: <A NAME="nazwa_etykiety"></A> (nazwa etykiety) Po stworzeniu etykiety należy stworzyć odsyłacz do etykiety Odsyłacz jest konstrukcją, która wskazuje pewne miejsce i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej konstrukcję można obrazowo przedstawić w postaci: <A HREF="miejsce_docelowe">Tekst, na którym należy kliknąć</A> odsyłacze do stron WWW <A HREF="http://www.wp.pl"> Wirtualna Polska </A> Odsyłacze do poczty elektronicznej <A HREF="mailto:imie_nazwisko@adres">Tutaj kliknij</A>
ZASADY TWORZENIA STRON WWW Publikowanie w Sieci Pisz jasno i bądź zwięzły. Testuj strony w wielu przeglądarkach. Organizuj strony w sposób przejrzysty podsumowując temat, korzystaj z nagłówków, stosuj listy, nie zapominaj o menu zawierających połączenia (linki), nie ukrywaj ważnych informacji w tekście. Twórz strony, będące samodzielnymi całościami. niech Twoje tytuły będą opisowe, jeśli strona wiąże się tematycznie ze stroną poprzedzającą, umieść połączenia nawigacyjne do strony (a także do strony głównej). Ostrożnie stosuj wyróżnienia - nie nadużywaj atrybutów formatowania (takich jak pogrubienie, kursywa, wielkie litery, miganie, efekt marquuee). Sprawdzaj ortografię i składnię.
PROJEKTOWANIE STRONY Projektowanie i układ strony Stosowanie połączeń Stosuj nagłówki (znacznik Hn) jako nagłówki. Grupuj informacje wiążące się ze sobą. Stosuj zwarty układ konsekwentnie stosuj elementy strony - jeśli strona rozpoczyna się nagłówkiem podkreślonym linią, taki sam układ powinien pojawić się na pozostałych stronach, konsekwentnie przestrzegaj form nawigacji - na kolejnych stronach, umieszczaj menu nawigacyjne zawsze w tym samym miejscu. Stosowanie połączeń Dbaj o to, by tekst prezentacyjny połączeń zawartych w menu był opisowy. Umieszczaj połączenia w tekście. Unikaj używania słów "tutaj, kliknij tutaj, naciśnij przycisk Back" itp. Połączenia twórz tylko wówczas, gdy są ku temu ważne powody. Unikaj tworzenia połączeń do mało istotnego materiału.
OBRAZY Obrazy Nie przesadzaj z liczbą obrazów. Stosuj tekst alternatywny (dla przeglądarek tekstowych). atrybut ALT znacznika <IMG> spowoduje, iż w przeglądarkach tekstowych grafika zostanie zastąpiona tekstem, jeżeli to możliwe stwórz dwie wersje - dla przeglądarek graficznych i dla tekstowych. Stosuj małe obrazy cała strona (tekst plus grafika) powinna załadować się w czasie nie dłuższym niż 30 sekund (uprzedzaj o stronach "ważących" powyżej 50 KB). zapisuj pliki GIF z przeplotem, przetestuj zapis obrazu w formatach JPEG i GIF, i sprawdź, który z nich daje w efekcie mniejszy plik, w przypadku obrazów w formacie GIF, im uboższa paleta kolorów, tym mniejszy plik, wykorzystuj fragmenty obrazu lub zmień jego skalę. Nie przesadzaj z kolorami tła i połączeń zadbaj o to, by kolory pierwszego planu (tekstu) kontrastowały z kolorami tła, jeśli stosujesz wzorzyste tło, sprawdź, czy wzór nie pokrywa się z tekstem.
DOBRE RADY Inne dobre zwyczaje i podpowiedzi Umieszczaj połączenia do strony głównej. Nie rozdzielaj tematu między strony. Wyważ właściwie liczbę stron. Podpisuj swoje strony. Twórz tekstowe wersje dokumentów hipertekstowych.
LITERATURA 1) ” Podstawy projektowania w języku HTML” A. Mazur www.KOMPUTERSWIAT.PL www.kurshtml.boo.pl „Indeks znaczników HTML” zasoby KISS Zasoby Internetu