INFORMACJE DO ZAPAMIĘTANIA

Transkrypt

1 INFORMACJE DO ZAPAMIĘTANIA Do opisywania wyglądu witryn internetowych wykorzystywane są kaskadowe arkusze stylów CSS. W języku JavaScript można tworzyć skrypty działające po stronie przeglądarki, aby nasza witryna była widoczna dla innych, musimy składające się na nią pliki umieścić na serwerze WWW. Przykładowy szkielet dokumentu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>tytuł</title> </head> <body> Tu znajduje się cała zawartość dokumentu wyświetlana przez przeglądarki. </body> </html> Fragmenty materiałów ze strony: Definicja typu dokumentu Jak wspomnieliśmy we wstępie, ramki nie są już obecne w specyfikacji HTML 4.01 Strict, a jedynie w HTML 4.01 Transitional i Frameset. Jeśli stosujesz w swojej witrynie ramki, strona zawierająca definicję ramek powinna mieć podaną następującą deklarację typu dokumentu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " Również ramka, w której znajdują się odsyłacze wczytujące dokumenty do innej ramki nie może mieć deklaracji Strict, gdyż nie przewiduje ona atrybutu target. Dlatego konieczne jest użycie deklaracji Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

2 " Czym jest odsyłacz? Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej budowę można obrazowo przedstawić w postaci: <a href="miejsce_docelowe">tekst, na którym należy kliknąć</a> Gdy utworzymy odsyłacz, ciąg znaków "tekst, na którym należy kliknąć" będzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkreślony (choć można to zmienić). Na przykład odsyłacz do miesięcznika PC World Komputer: <a href=" znajdziesz miesięcznik PC World Komputer</a> Tutaj znajdziesz miesięcznik PC World Komputer Gdy przesuniesz kursor myszki nad odsyłacz, kursor przyjmie postać rączki, natomiast w wierszu statusu przeglądarki powinna się pojawić informacja Kliknięcie spowoduje natychmiastowy skok do wskazanego miejsca ("natychmiastowość" jest pojęciem względnym - niekiedy trwa to całkiem długo, jeśli łącza są przeciążone...). Odsyłacz do pliku tekstowego TXT <a href="plik_tekstowy.txt">plik tekstowy TXT</a> Plik tekstowy TXT Odsyłacz do pliku graficznego GIF <a href="plik_graficzny.gif">plik graficzny GIF</a> Plik graficzny GIF Odsyłacz do pliku dźwiękowego <a href="pinkpant.mid">plik dźwiękowy</a> Plik dźwiękowy Odsyłacz do pliku PDF <a href="licence.pdf">dokument PDF</a> Czcionka pogrubiona Kod: <b> </b> Przykład: To jest czcionka pogrubiona (bold) Czcionka pochylona Kod:

3 <i> </i> Przykład: To jest czcionka pochylona (italic) Czcionka o stałej szerokości znaku Kod: <tt> </tt> Przykład: To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype) Duża czcionka (+1 punkt) Kod: <big> </big> Przykład: Duża czcionka Mała czcionka (-1 punkt) Kod: <small> </small> Przykład: Mała czcionka Wstawianie grafiki do dokumentu Podstawowa konstrukcja ma następującą postać: <img src="/sciezka/plik_graficzny" alt="nazwa alternatywna"> Img jest skrótem od Image (obraz), natomiast src jest skrótem od Source (żródło). Alt jest nazwą alternatywną, a więc taką, która poinformuje o zawartości ilustracji w urządzeniu nie odczytującym grafiki. eśli nie stosujemy żadnych dodatkowych atrybutów, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielkość oryginału. Możemy jednak użyć szeregu atrybutów, które zmienią położenie, wielkość i inne cechy obrazka. Przeglądarka automatycznie odczytuje właściwą wysokość i szerokość ilustracji, ale zazwyczaj w edytorach HTML wielkości te są jawnie wstawiane, np. <img src="/grafika/sufinka.jpg" width="342" height="353" alt="sufi w tulipanach">

4 Jeśli z jakichś powodów zależy nam na deformacji oryginalnych wymiarów, możemy je ręcznie zmienić, podając arbitralnie inne rozmiary, na przykład: <img src="/grafika/sufinka.jpg" height="150" width="200" alt="sufi w tulipanach"> Należy przy tym pamiętać, ze zmniejszenie rozmiarów w definicji nie wpływa na wielkość pobieranego obrazka - jest on pobierany w oryginalnym rozmiarze, a następnie zmniejszany przez przeglądarką. Przy zwiększaniu wymiarów w stosunku do wartości oryginalnych pamiętajmy również o malejącej rozdzielczości obrazka na ekranie przeglądarki. Obramowania i odstępy W starszych wersjach HTML stosowano atrybut border, za pomocą którego nadawano grafice obwódkę. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS, o znacznie większych możliwościach - obramowanie border lub obrys outline. <img src="/grafika/sufinka.jpg" width="171" height="177" alt="sufi w tulipanach" style="border: 5px red solid; "> Pozycja grafiki W starszych wersjach HTML stosowano atrybut align (left, center, right), za pomoca którego ustawiano grafikę przy lewym lub prawym marginesie, względnie na środku wiersza. Obecnie jest to atrybut przestarzały, natomiast jego rolę przejęły style CSS. Ogólne ramy tabeli Ramy tabeli tworzone są za pomocą polecenia: <table> </table> Cała zawartość 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. Wiersze tabeli wprowadzamy za pomocą polecenia: <tr> </tr> Wiersz tabeli jest jej konkretyzacją, a sam tworzy z kolei ramy dla komórek z danymi. W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>, dla przykładu: <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> Komórka w wierszu Komórki tabeli wprowadzamy za pomocą polecenia:

5 <td> </td> Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego wiersza, na przykład: <table> <tr> <td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td></tr> <tr> <td> </td><td> </td><td> </td></tr> </table> Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. Oczywiście komórki można opisywać w edytorze także w kolejnych rzędach, co naturalnie nie wpływa na ich faktyczne położenie w przeglądarce, wyznaczone przez definicję wiersza. Sposób pisania to kwestia wygody użytkownika. Przykład tabeli: a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Jak widać, tabela zawiera 3 rzędy, w każdym po 5 komórek, zaś w konkretnych komórkach (w ramach znaczników <td> </td>) zostały umieszczone dane: od a1 do c5. Jest to najprostszy przykład tabeli, która nie zawiera żadnych obramowań, barw, nagłówków i podpisu. Za chwilę przystąpimy do urozmaicania tabeli, dzięki czemu znacznie wzrośnie jej przejrzystość i wartość informacyjna. Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość. <table border> </table> a1 a2 a3 a4 a5 b1 b2 b3 b4 b5 c1 c2 c3 c4 c5 Gdybyśmy podali szerokość obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przeglądarkę, na przykład: <table border="10"> </table> Szerokość tabeli Dotychczas tworzyliśmy tabele, które przybierały domyślną szerokość na ekranie przeglądarki. Atrybut width daje nam możliwość samodzielnego zdefiniowania szerokości tabeli. Podany atrybut jest "silniejszy" od innych atrybutów, które wpływają na szerokość tabeli na ekranie. <table border width="600"> </table>

6 Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach. Ogólne ramy formularza Elementy formularza są tworzone w pewnych ogólnych ramach, między nimi umieszczamy wszystkie pozostałe elementy. Ramy te tworzymy za pomocą polecenia: <form> </form>. Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik strony zechce przesłać do autora jakieś informacje. Nas interesuje w tym miejscu wysyłanie informacji za pomocą poczty elektronicznej, w związku z czym w definicji formularza powinniśmy umieścić specjalne polecenie action=jakaśtamakcja. Należy również określić sposób komunikowania się przeglądarki czytelnika z serwerem, a więc czy przesyła ona jakieś informacje, czy też je pobiera. Wybieramy zatem jedną z dwóch możliwych metod - post lub get. Wygląda to więc ostatecznie następująco (zakładamy, że czytelnik strony ma wysłać informacje za pomocą poczty elektronicznej): <form action="mailto:autor_strony@jego_domena" method="post"> zawartość formularza </form> Jeśli dodasz jeszcze temat listu, czyli subject po znaku zapytania, wypełniony formularz trafi do autora z taką właśnie informacją w polu tematu listu. Jeśli zamieszczamy na stronie kilka formularzy z ankietami, każdą z nich możemy opatrzyć innym tematem, co ułatwi np. organizację odbieranej poczty, a także da od razu szybką informację o tym, czego dotyczy konkretna przesyłka. <form action="mailto:autor_strony@jego_domena?subject=temat ankiety" method="post"> zawartość formularza </form> I jeszcze jeden istotny parametr: Gdyby ktoś wysłał tak skonstruowany formularz, dane dotarłyby nie w liście, a w załączniku, i to mniej więcej w takiej postaci: Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40& zaj%eacie=emerytura&miejscowo%9c%e6=50-100&komputer=pc+pentium&system=on& Przegl%B9darka+WWW=Netscape+Navigator& Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wy%9Clij Problem polega na tym, że znaki z formularza są w dość osobliwy sposób konwertowane i docierają częściowo w postaci "krzaków". Jeśli nie chcemy, aby odpowiedź przychodziła w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, powinniśmy zastosować parametr enctype="text/plain". <form enctype="text/plain" action="mailto: wimmer@wimmer.pl?subject=temat ankiety" method="post">

7 A oto, co zobaczymy w otrzymanym liście: Imię i nazwisko=jan Kowalski Płeć=mężczyzna Wiek=31-40 zajęcie=praca Miejscowość=powyżej 1000 komputer=pc Pentium system operacyjny=windows 95 Przeglądarka WWW=Internet Explorer Przeglądarka WWW=Netscape Navigator Ocena=bdb Opinia=Genialne ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ Pole tekstowe Jak wspomnieliśmy wyżej, input służy o wprowadzania pól, które pozwolą czytelnikowi wpisać jakąś informację lub wybrać jedną z opcji. Pole tekstowe tworzymy za pomocą definicji: <input type="text" name="nazwa_pola" value="wartość początkowa" size="rozmiar pola w znakach" maxlength="maksymalny rozmiar pola"> Na przykład: <input type="text" name="nazwisko" value="kowalski" size="30" maxlength="40"> A łącznie z informacją wprowadzającą: <p>podaj swoje nazwisko: <input type="text" name="nazwisko" value="kowalski" size="30" maxlength="40"></p>t;text/javascript" src=" version=156"> Budowa strony ramkowej Najbardziej typowym przykładem użycia ramek jest podział okna przeglądarki na dwa pionowe okna i umieszczenie w jednym (zwykle lewym, mniejszym) spisu treści, a przeznaczenie drugiego (prawego, większego) na przywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Kliknięcie na jakiejkolwiek pozycji spisu w lewym oknie powoduje wczytanie dokumentu do okna z prawej strony. Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Jest ona kontenerem dla ramek. Pozostałe strony, wchodzące w skład całego, wielostronicowego układu, są stronami podrzędnymi.

8 Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki noframes pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <body></body> mogą być umieszczane jedynie w obrębie noframes, aczkolwiek ich obecność nie jest konieczna. Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka edytorów HTML. Za chwilę wyjaśnimy ich znaczenie, a oto przykład. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " <html> <head> <title>edytory HTML</title> </head> <frameset cols="25%,*%"> <frame scrolling="auto" name="lista edytorów" src="spisedyt.htm"> <frame scrolling="yes" name="edytory" src="edyt.htm"> <noframes> <body> Zawartość strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html> Wyjaśnienie znaczników Kluczowe znaczenie ma para znaczników <frameset> </frameset>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek. Zwróćmy uwagę na "wyłamującą się" parę znaczników <noframes> </noframes>, o której będziemy mówić nieco niżej. Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki, która nie akceptuje ramek. Jeśli natomiast czytelnik strony posługuje się nowoczesną przeglądarką, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki. Nietrudno się domyślić, że treść między znacznikami <noframes> </noframes> powinna stanowić swoisty równoważnik strony "ramkowej". Odradzamy raczej stosowany dość często komunikat "Twoja przeglądarka nie obsługuje ramek" - szacunek dla gości strony wymaga obsłużenia także tej wąskiej grupy, która z jakichś powodów posługuje się programami nie akceptującymi ramek. Wygodnym rozwiązaniem może być podanie w ramach elementu noframes odsyłacza do strony ze spisem treści, która posłuży takiej osobie jako punkt centralny. Znacznik <frame> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.

9 Znacznik frameset Aby konstrukcja mogła działać, konieczne jest podzielenie okna przeglądarki - pionowe lub poziome. Poniższy kod (kontynuujemy nasz przykład) zawiera informację o podzieleniu okna na dwie kolumny. Służy do tego atrybut cols="x,y", umieszczany w otwierającym znaczniku frameset. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy). Przykład, w którym lewa ramka zajmuje 18% szerokości okna przeglądarki, a prawa ramka - 82%: <frameset cols="18%,82%"> Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji, w której np. górna ramka ma 200 pikseli, dolna 200 pikseli, a środkowa zajmuje pozostały obszar, zależny od wielkości okna przeglądarki: <frameset rows="200,*,200"> Znacznik frame Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML (choć mógłby to być na przykład plik w formacie PDF, który moglibyśmy obejrzeć za pomocą specjalnej wtyczki (plugin) wspomagającej przeglądarkę. Aby przypisać ramce dokument, musimy podać źródło src dokumentu. Należy w tym celu użyć konstrukcji: <frame src="nazwa_pliku.htm"...> Przywoływany plik może się znajdować w tym samym katalogu lub jakimkolwiek innym - podajemy wtedy nazwę pliku z pełną ścieżką dostępu - może to nawet być dokument w innej witrynie. Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć atrybutu scrolling, który wyświetli ramkę razem z suwakami. Stosowny atrybut ma postać: <frame scrolling="yes"...> Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić atrybut scrolling="no", ustawiając zarazem odpowiednio szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy parametru scrolling="auto", suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka. Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę - name. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy. <frame name="nazwa_ramki"...> Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za

10 pomocą myszki. Gdy jednak użyjemy w definicji atrybutu noresize <frame noresize...> zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne. Atrybut frameborder="1" lub frameborder="0" pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. <frame frameborder="1"...> Atrybut marginheight="x" wymusza dodatkowy odstęp mierzony w pikselach (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei marginwidth="x" wymusza margines lewy i prawy. <frame marginheight="50"...> Ostatecznie cała definicja ramki może mieć postać: <frame scrolling="auto" name="nazwa_ramki" src="nazwa_pliku.htm"> W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy w definicji frameset. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe. Skoro jesteś w tym miejscu, jesteś gotów/a do rozwiązania testu: kliknij