LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

Transkrypt

1 LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE 1. TABELE 1.1. Definicja tabeli Definicja tabeli musi być umieszczona między znacznikami. W ich ramach umieszczane są definicje rzędów i komórek: <TR><TD></TD><TD></TD></TR> <TR><TD></TD><TD></TD></TR> 1.2. Parametry tabel BORDER powoduje wyświetlenie obramowania tabeli: <TABLE BORDER> lub <TABLE BORDER=10> CELLSPACING powoduje ustalenie odległości pomiędzy komórkami tabeli: <TABLE CELLSPACING=5> CELLPADDING powoduje ustalenie odstępu między zawartością komórki i jej obramowaniem: <TABLE CELLPADDING=15> HEIGHT, WIDTH powodują ustalenie wysokości i szerokości tabeli: <TABLE HEIGHT=100 WIDTH=200> Parametry height i width mogą być również zdefiniowane dla komórki. BGCOLOR ustawia tło tabeli: <TABLE BGCOLOR= red > Parametr bgcolor może być również zdefiniowany dla komórki. BACKGROUND wstawia obraz jako tło tabeli: <TABLE BACKGROUND= plik.jpg > Parametr background może być również zdefiniowany dla komórki.

2 BORDERCOLOR ustala kolor obramowania tabeli <TABLE BORDERCOLOR= red > Parametr bordercolor może być również zdefiniowany dla komórki. ALIGN powoduje wyrównanie tabeli (do prawej, do lewej, wycentrowanie lub wyjustowanie): <TABLE ALIGN= center > Opcja ta jest dostępna również w przypadku komórek, jednak powoduje ona wyrównanie tekstu znajdującego sie w komórce Podpis pod tabelą Tabela powinna zawierać tytuł, wyjaśniający jej treść. Powinien on zostać zdefiniowany zaraz za ogólną definicją tabeli: <CAPTION ALIGN= bottom >Tytuł</CAPTION> Parametr ALIGN definiuje położenie tytułu względem tabeli Łączenie komórek Czasami konieczne jest połączenie dwóch lub więcej komórek w jedną. Do tego służą w HTML polecenia ROWSPAN i COLSPAN. ROWSPAN pozwala łączyć komórki wierszami, natomiast COLSPAN kolumnami: <TR><TD></TD><TD></TD></TR> <TR><TD ROWSPAN=2></TD></TR> 1.5. Nagłówek, ciało i stopka tabeli Możliwe jest tworzenie tabel na zasadzie podobnej do tworzenia całego dokumentu HTML. Definicja tabeli wtedy zawiera nagłówek THEAD, ciało TBODY i stopkę TFOOT: <THEAD>nagłówek</THEAD> <TFOOT>stopka</TFOOT> <TBODY> </TBODY> Wydzielenie nagłówka i stopki pozwala wyświetlić je zawsze na ekranie, nawet jeśli tabela przekracza swoim rozmiarem rozmiar strony.

3 2. Formularze 2.1. Definicja formularza Formularze są jednym z najciekawszych i najistotniejszych elementów stron internetowych. Pozwalają one na komunikację między użytkownikiem i autorem strony, poprzez tworzenie ankiet, czy też sklepów internetowych. Elementy formularza tworzone są w ramach znaczników <FORM>. W tym polu definiujemy również akcję wykonywaną przez komputer, gdy użytkownik wysyła informację do autora. Służy to tego parametr ACTION = akcja. Konieczne jest również zdefiniowanie metody, przy pomocy której będą przesłane informacje POST lub GET. Definicja formularza ma zatem postać: Gdy korzystamy z poczty elektronicznej: <FORM NAME= formularz ACTION=mailto:użytkownik@ METHOD=POST> Gdy odwołujemy się do innej strony: <FORM NAME= formularz ACTION= url_strony METHOD=POST> W przypadku odwoływania się do innej strony, jest ona obiektem dynamicznym, a więc jej zawartość zmienia się w zależności od informacji przesłanych z formularza. Obiekty dynamiczne najczęściej tworzone są z wykorzystaniem języków PHP lub Java Pola formularza Pole INPUT Pole to służy do tworzenia pozycji umożliwiających użytkownikowi wpisanie informacji lub wybór jednej z dostępnych opcji. Zawiera parametry TYPE, NAME i opcjonalnie VALUE: <INPUT TYPE= text NAME= imię VALUE= Twoje imię > Rodzaje pól INPUT: Tekstowe: <INPUT NAME= VALUE= > Checkbox: <INPUT TYPE= checkbox NAME= VALUE= > lub jeśli pole ma być domyślnie zaznaczone: <INPUT TYPE= checkbox NAME= VALUE= CHECKED>

4 Radio: <INPUT TYPE= radio NAME= VALUE= > lub jeśli pole ma być domyślnie zaznaczone: <INPUT TYPE= radio NAME= VALUE= CHECKED> Submit: Pole typu submit służy jako przycisk uruchamiający akcję zdefiniowaną parametrem ACTION formularza. <INPUT TYPE= submit VALUE= wyślij > Reset: Pole reset jest również przyciskiem i jego naciśnięcie powoduje wyczyszczenie zawartości wszystkich pól formularza oraz przywrócenie wartości domyślnych. <INPUT TYPE= reset VALUE= skasuj > File: Pole file pozwala na dołączenie pliku do informacji przesyłanych z formularza. <INPUT TYPE= file NAME= > Password: Jest to pole o takim samym charakterze jak pole tekstowe, jednak wpisywane znaki są zastępowane domyślnym znakiem, np. *, uniemożliwiając odczytanie wpisanego tekstu. <INPUT TYPE= password NAME= VALUE= > Pole SELECT SELECT służy do tworzenia rozwijalnego menu lub pól umożliwiających wybór kilku opcji jednocześnie. <SELECT NAME= nazwa_listy > <OPTION>pierwszy element <OPTION SELECTED>drugi element </SELECT> Parametr SELECTED oznacza że określona opcja będzie domyślnie zaznaczona. Wybór kilku opcji jest możliwy jeśli pole SELECT ma zdefiniowany parametr MULTIPLE: <SELECT NAME= nazwa_listy MULTIPLE></SELECT>

5 Pole TEXTAREA TEXTAREA jest polem pozwalającym na wprowadzanie komentarzy użytkownika. Jest to pole tekstowe jednak o dużo większych wymiarach niż INPUT. Możliwe jest określenie rozmiarów pola poprzez podanie wartości parametrów ROWS i COLS. <TEXTAREA NAME= pole ROWS=10 COLS=50 VALUE= tekst > </TEXTAREA> Pole Button BUTTON jest przyciskiem, a więc jest polem podobnym do INPUT, jednak pozwala na wprowadzenie większej ilości opcji. Jest to element dostępny w HTML 4.0 lub późniejszym. <BUTTON>Treść przycisku</button> 2.3. Kodowanie informacji Informacje przesyłane z formularza przesyłane są w postaci zakodowanego załącznika, co może spowodować pewne trudności z odczytaniem informacji po jej odebraniu. Dlatego za pomocą parametru ENCTYPE możliwe jest zdefiniowanie formy, w jakiej będą przesłane informacje. Możliwe są opcje: text/plain informacje z formularza przesyłane są w postaci zwykłego tekstu: <FORM ENCTYPE= text/plain ACTION= NAME= METHOD= Post > multipart/form-data informacje przesyłane są w postaci binarnej konieczne jeśli korzystamy z pola INPUT typu File (czyli gdy dołączamy plik do przesyłanych informacji) <FORM ENCTYPE= multipart/form-data ACTION= METHOD= Post >