docHTML - AGH
download 
Reklamacja Transkrypt
HTML - AGH
Akademia Górniczo-Hutnicza Wydział Inżynierii Mechanicznej i Robotyki Katedra Robotyki i Dynamiki Maszyn SIECI KOMPUTEROWE I BAZY DANYCH ĆWICZENIE NR 5 Temat: TWORZENIE DOKOMENTÓW HTML Wstęp HTML jest językiem skryptowym pozwalającym za pomocą znaczników określać różne formatowanie dokumentu. Dokumenty HTML są plikami tekstowymi zawierającymi informacje o formatowaniu oraz powiązaniach z innymi obiektami (grafika, dźwięk, inne dokumenty). Ponieważ HTML jest językiem skryptowym, kod dokumentu czytany jest sekwencyjnie i przedstawiany na ekranie za pomocą przeglądarki. Przeglądarka jest programem, który na wysyłane żądanie odbiera z serwera gotowy dokument HTML (za pośrednictwem protokołu http) i dokonuje jego wizualizacji. Dokumenty HTML są plikami tekstowymi o odpowiednich rozszerzeniach (.html, .htm) zawierającymi sparowane sekwencje znaczników. Znaczniki HTML umieszcza się w nawiasach: <HTML> - znacznik otwierający </HTML> - znacznik zamykający Aby kod HTML został poprawnie zinterpretowany należy koniecznie zamykać wstawiane znaczniki, wyjątkiem jest pewna grupa znaczników, dla której nie jest wymagane zamykanie. Poniżej przedstawiono budowę typowego dokumentu HTML: <HTML> <HEAD> <TITLE> tytuł </TITLE> <META> </HEAD> <BODY> Część niewidzialna zawiera informacje o dokumencie wykorzystywane np. przez wysukiwarki Część widzialna dokumentu zawiera właściwy materiał strony </BODY> </HTML> Poniżej scharakteryzowane zostaną podstawowe znaczniki pozwalające na stworzenie prostego dokumentu. Działanie znaczników odnosi się do tekstu i treści zawartych pomiędzy otwarciem znacznika a jego zamknięciem. Dla większości znaczników przewidziane są dodatkowe parametry, dzięki którym można sterować ich działaniem. Parametry te ustawiane są poprzez podanie nazwy parametru i jego wartości w znaczniku otwierającym. Przykładowo ustawienie koloru czcionki bloku tekstu można osiągnąć poprzez odpowiednie wykorzystanie znacznika FONT (np. <FONT color=”green”> blok zielonego tekstu ... </FONT>). Poniżej przedstawiono podstawowe znaczniki służące do konstrukcji dokumentu wraz z ich parametrami). Podstawowe znaczniki HTML Do najważniejszych i jednocześnie najczęściej używanych znaczników HTML należą definicje nagłówków, paragrafy oraz znaczniki zmiany linii. Nagłówki Nagłówki definiowane są poprzez znaczniki <h1> do <h6>, przy czym <h1> definiuje największy a <h6> najmniejszy. Przykład użycia pokazany jest poniżej. <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This is is is is is is a a a a a a heading</h1> heading</h2> heading</h3> heading</h4> heading</h5> heading</h6> HTML automatycznie dodaje ekstra odstęp przed oraz po definicji nagłówka. Paragrafy Paragrafy definiowane są poprzez znacznik <p>. Przykład paragrafu przedstawiony jest poniżej. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatycznie dodaje ekstra odstęp przed oraz po definicji paragrafu. Znaki nowej linii Ponieważ znaki nowego wiersza występujące w kodzie HTML są ignorowane przez przeglądarki, konieczne jest zastosowanie stosownego znacznika jeśli konieczne jest zakończenie wiersza w określonym miejscu. W HTML takim znacznikiem jest <br>. Powoduje on zakończenie wiersza i przejście do nowej linii bez zakańczania bieżącego akapitu. Przykład użycia tego znacznika pokazany jet poniżej. <p>Ten paragraf <br> jest złamany <br>na trzy części.</p> Znacznik <br> pozostaje pusty, nie wymaga podawania żadnych parametrów, nie jest również konieczne stosowanie znacznika zamykającego. Komentarze w HTML Znaczniki komentarzy wykorzystywane są do wstawiania do dokumentu HTML tekstu ignorowanego przez przeglądarki. Komentowanie każdego źródła programu zdecydowanie poprawia jego czytelność oraz ułatwia wprowadzanie poprawek i edycję w przyszłości. Jest to cecha bardzo polecana przez wszystkich programistów. <!-- To jest blok komentarza HTML. --> Uwaga: Należy zauważyć iż znacznik otwierający komentarz zawiera wykrzyknik zaraz po nawiasie otwierającym. Znacznik końcowy jest niesymetryczny i nie posiada wykrzyknika. Uwagi programistyczne W czasie tworzenia dokumentów HTML programista nigdy nie może być pewien jak dana strona będzie się prezentowała w innej niż jego przeglądarce. Rozkład elementów na stronie zależy od wielu czynników: formatowania, interpretacji tego formatowania przez konkretną przeglądarkę, a nawet parametrów wyświetlania ustawionych na konkretnym komputerze użytkownika, wielkości okna przeglądarki. Tekst widoczny na stronie będzie przeformatowywany ilekroć użytkownik zmieni wielkość okna przeglądarki. Dlatego zupełnie niecelowe jest dodawanie białych znaków i pustych linii do tworzonego dokumentu. Dodatkowo dokument HTML przed wyświetleniem zostanie przeformatowany w ten sposób, że wszystkie wielokrotne białe znaki (spacje, tabulacje) zostaną przetransformowane do jednej, natomiast znaki nowej linii zamieniane są na pojedyncze spacje. W niektórych dokumentach HTML można zaobserwować iż część znaczników (np. <p>) nie jest zamykana. Nie jest to dobra praktyka, która łatwo może doprowadzić do pomyłek i niepotrzebnie zmniejsza czytelność kodu. W najnowszych specyfikacjach HTML uznawana jest za błąd programisty. Dlatego nawet jeśli wszystko wydaje się działać poprawnie, należy takich sytuacji unikać. Podglądanie kodów źródłowych stron HTML Dobrą praktyką jest podglądanie dobrze wykonanej pracy innych bardziej doświadczonych programistów. Podglądając istniejące w sieci gotowe dokumenty HTML można również zdobyć wiele pożytecznych umiejętności. Wszystkie dostępne obecnie przeglądarki pozwalają na uzyskanie widoku istniejącej strony w postaci źródłowej. Najczęściej opcja taka dostępna jest w menu Widoku (VIEW) jako Źródło (SOURCE) lub Źródło Strony (PAGE SOURCE). Otwarty następnie zastaje widok aktywnego dokumentu w postaci kodu źródłowego HTML. Zestawienie podstawowych znaczników HTML Znacznik <html> <body> <h1> to <h6> <p> <br> <hr> <!--> Opis Definiuje dokument HTML Definiuje ciało dokumentu Definiuje nagłówkowe paragrafy od 1 do 6 Definiuje zwykły paragraf Wstawia znak nowej linii do strony HTML Definiuje poziomą linię Wstawia komentarz do pliku HTML Formatowanie tekstu HTML HTML definiuje kilka znaczników przeznaczonych do specjalnego formatowania tekstu (np. bold, italic, indeksy dolne lub górne). Wybrane znaczniki formatowania tekstu Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> Description Definiuje pogrubienie tekstu Zwiększa czcionkę o jeden rozmiar w porównaniu z bieżącą Definiuje tekst jako wyróżniony (zazwyczaj jest to pogrubienie) Definiuje kursywę Zmniejsza czcionkę o jeden rozmiar w porównaniu z bieżącą Definiuje silne wyróżnienie tekstu Definiuje indeks dolny Definiuje indeks górny Definiuje nowo dodany tekst do dokumentu Znaczniki formatujące teksty informatyczne Tag <code> <kbd> Description Wykorzystywany do oznaczania fragmentów kodu progarmów Definiuje dane wprowadzane przez użytkownika za pomocą klawiatury <samp> <tt> <var> <pre> Używany do prezentacji wyników wykonania kodu Definiuje czcionkę i stałej szerokości Definiuje zmienną lub argument wywołania funkcji Definiuje teks prefommatowany Znaczniki definicji i cytowań Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Description Definiuje skrót Definiuje akronimy (najczęściej w połączeniu z atrybutem title) Definiuje element adresu Definiuje kierunek tekstu Definiuje długie cytowanie Definiuje krótkie cytowanie Definiuje cytowanie Oznacza część definicji Znaki szczególne Niektóre znaki mają szczególne znaczenia w składni HTML (np. znaki „<” oraz „>”) i nie mogą być bezpośrednio stosowane w dokumentach. W przypadku gdy istnieje konieczność wykorzystania tego typu znaków w dokumencie powinny zostać użyte specjalne metody ich wprowadzania. Wprowadzanie znaków szczególnych HTML Zapis wprowadzanego znaku szczególnego składa się ze znaku ampersand (&), predefiniowanej nazwy znaku lub # oraz kodu znaku oraz średnika kończącego zapis. Przykładowo do zapisania znaku mniejszy niż w kodzie HTML potrzebna jest następująca składnia: – < lub – < Wyższością użycia nazwy w porównaniu z numerem kodu jest łatwiejsze jej zapamiętanie. Wadą natomiast jest to że nie wszystkie przeglądarki obsługują wszystkie nazwy. Uwaga: Wielkość liter dla definicji symbolicznych są znaczące. Odstęp Bardzo popularnym znakiem specjalnym jest w HTML odstęp. Normalnie wprowadzony kilkakrotnie w dokumencie redukowany jest do pojedynczej wartości. Przykładowo wprowadzenie kolejnych 10 odstępów i tak w efekcie końcowym da jeden. Aby wymusić zwiększenie liczby odstępów konieczne jest dodanie ich w postaci znaków specjalnych . Nie jest to jednak dobra praktyka programistyczna. Najpopularniejsze znaki specjalne: Znak < > Opis spacja mniejszy niż większy niż Nazwa < > Numer kodowy   < > & " ' ampersand cudzysłów apostrof & " ' & " ' Dodatkowe znaki specjalne: Znak ¢ £ ¥ § © ® × ÷ Pełna lista Reference. Opis Nazwa cent ¢ funt £ yen ¥ paragraf § prawa autorskie © zarejestrowany znak handlowy ® mnożenie × dzielenie ÷ znaków specjalnych może zostać znaleziona pod Numer kodowy ¢ £ ¥ § © ® × ÷ adresem: HTML Entities Odnośniki HTML Dokumenty HTML wykorzystują odnośniki hipertekstowe do wskazywania innych dokumentów dostępnych w zasobach sieciowych. W specyfikacji HTML łącze hipertekstowe definiowane za pomocą znacznika <a> (ang. anchor – zakotwiczenie). Tak zdefiniowany odnośnik może wskazywać na inną stronę w sieci Web, plik, obrazek, plik dźwiękowy, film itd. Parametr href W czasie tworzenia odnośnika koniecznym parametrem jest „href”. Parametr ten zawiera adres URL wskazywanego dokumentu (adres URL opisywany jest w dalszej części opracowania). Przykład utworzenia łącza hipertekstowego pokazane jest poniżej. <a href="url">Tekst wyświetlany jako odnośnik</a> W powyższym przykładzie znacznik <a> tworzy zakotwiczenie w bieżącym dokumencie do zasobu wskazywanego parametrem „href”. Tekst pomiędzy znacznikami otwierającym i zamykającym jest wyświetlany na stronie jako hiperłącze. Kolejny przykład pokazuje odnośnik wskazujący na witrynę Akademii Górniczo–Hutniczej. <a href="http://www.agh.edu.pl/">Odwiedź naszą uczelnię!</a> Powyższy widziany będzie na stronie WWW jako: Odwiedź naszą uczelnię! Parametr target Parametr „target” pozwala określić gdzie zostanie otwarty dokument na który wskazuje łącze „href”. Przykładowo aby wskazana strona otworzyła się w nowym oknie przeglądarki należy odnośnik zdefiniować zgodnie z poniższym przykładem. <a href="http://www.agh.edu.pl/" target="_blank">Odwiedź naszą uczelnię!</a> Parametr name Parametr name jest używany do utworzenia nazwanego odnośnika. Odnośnik taki pozwala m.in. na wskazanie konkretnego miejsca w docelowym dokumencie. Używając nazwanych odnośników nie ma potrzeby przewijania docelowej strony po jej otworzeniu ponieważ automatycznie zostanie ona ustawiona tak aby widoczne było miejsce zaetykietowane przez parametr name. Poniżej pokazana jest składnia potrzebna do utworzenia nazwanego odnośnika. <a name="etykieta">Wyświetlany tekst.</a> Nazwa użyta dla nazwanego odnośnika może być dowolna. Poniższy przykład tworzy nazwany odnośnik. <a name="etykieta">Jakaś etykieta</a> Należy zauważyć iż nazwany odnośnik nie jest wyświetlany w żaden szczególny sposób. Aby wyświetlić sekcję zawierającą zdefiniowaną „etykietę” należy utworzyć odnośnik w następujący sposób: <a href="http://www.agh.edu.pl/linki_html.html#etykieta"> Skok prosto do etykiety</a> Podobnie może zostać utworzone przekierowanie do innej części tego samego dokumentu. Przykład takiego odnośnika pokazany jest poniżej. <a href="#miejsce1">Skok do pierwszego miejsca</a> Wskazówki Wskazane jest aby w odnośnikach dodawać końcowy slash (/) na końcu adresu. Np. href=”http://localhost/biblioteka/”. Jeśli tego nie zrobimy serwer WWW otrzyma dwa żądania wyświetlenia strony: – pierwsze w oryginalnej postaci: http://localhost/biblioteka – drugie – automatycznie uzupełnione slashem: http://localhost/biblioteka/ Nazwane odnośniki często używane są do tworzenia spisów treści. Spis taki najczęściej umieszczany jest na początku dokumentu. Wykonuje się go w ten sposób iż w każdym znaczącym miejscu dokumentu umieszcza się nazwany odnośnik. Wpisy w spisie treści wskazują zaś kolejne etykiety w tekście. Jeśli przeglądarka nie potrafi znaleźć odnośnika w dokumencie widok przewijany jest na początek strony. Ważne jest że nie zostaje wyświetlony błąd. Znaczniki odnośników Znacznik <a> Opis Tworzy odnośnik Ramki HTML Mechanizm ramek umożliwia podzielenie okna przeglądarki na mniejsze prostokątne obszary, z których każdy może zostać związany z innym dokumentem HTML. Zawartości wszystkich zdefiniowanych ramek są od siebie niezależne i mogą być ustawiane dowolnie. Niedogodnością ramek jest to, iż twórca strony musi pracować na kilku dokumentach jednocześnie. Strony z ramkami często sprawiają także problemy w trakcie drukowania. Znacznik Frameset Do zdefiniowania układu ramek wykorzystywany jest znacznik <frameset>. Pozwala on na utworzenie jednego wiersza lub kolumny ramek. W celu jednoczesnego podziały strony na komórki pionowe i poziome należy najpierw utworzyć wiersz/kolumnę a następnie poprzez zagnieżdżenie dokonać kolejnych podziałów. W trakcie podziału strony można jako parametr zadać poszczególne szerokości/wysokości kolejnych obszarów. Znacznik Frame Znacznik <frame> przypisuje konkretny dokument HTML do kolejnej ramki. Przykład zastosowania składni pokazany jest poniżej. <frameset cols="20%,70%"> <frame src="ramka_a.html"> <frame src="ramka_b.html"> </frameset> W powyższym przykładzie okno przeglądarki podzielone zostało na dwa obszary. Pierwszy obszar została zdefiniowany na 20% szerokości okna przeglądarki natomiast drugi na 70%. Następnie zostały przypisane dokumenty HTML do kolejnych ramek. I tak w ramce pierwszej znajdzie się dokument „ramka_a.html” oraz w ramce drugiej „ramka_b.html”. Wskazówki Rozmiary ramek posiadających widoczne krawędzie mogą być zmieniane przez użytkowników. Jeśli zależy nam na niezmiennym układzie ramek możliwe jest określenie parametru noresize=”noresize”, który zabroni zmiany rozmiaru zdefiniowanego przez twórcę strony. W celu dodania obsługi przeglądarek nie wspierających ramek możliwe jest dodanie znacznika <noframes>. Przykładowe użycie tego znacznika pokazane jest poniżej. <html> <frameset cols="25%,75%"> <frame src="ramka_a.html"> <frame src="ramka_b.html"> <noframes> <body>Twoja przeglądarka nie wspiera ramek!</body> </noframes> </frameset> </html> Uwaga: Powyższy przykład pokazuje wykorzystanie znacznika <noframes>. W dokumentach HTML tworzących zestawy ramek nie jest używany znacznika <body> ponieważ jest on wykorzystywany w dokumentach wyświetlanych w polach ramki. W przypadku jednak gdy przeglądarka nie wspiera ramek i używany jest znacznik <noframes>, do utworzenia strony wykorzystywane są definicje zawarte w jego wnętrzu. W związku z tym konieczne jest dodatkowe wstawienie znacznika <body> do sekcji <noframes>. Frame Tags Tag <frameset> <frame> <noframes> <iframe> Description Definiuje zestaw ramek Tworzy ramkę Definiuje sekcję nie wykorzystującą ramek dla przeglądarek ni wspierających tej technologii. Tabele HTML Tabele w dokumentach HTML zajmują szczególną rolę. Mogą one spełniać swoje podstawowe zadanie tzn. służyć do prezentacji danych ale w wielu przypadkach wykorzystywane są także jako podstawa dla kształtowania wyglądu strony. Duża elastyczność tabel wynikająca ze specyfiki ich tworzenia za pomocą składni HTML powoduje iż można za ich pomocą budować skomplikowane i niejednokrotnie wielokrotnie zagnieżdżone struktury znakomicie nadające się na szkielet stron internetowych. W wielu przypadkach, w których zabronione jest wyświetlanie krawędzi tabel użytkownik nawet nie domyśla się ich występowania. Tabele definiowane są za pomocą znacznika <table>. Następnie tabela dzielona jest na wiersze za pomocą znacznika <tr>. Po tym pierwszym podziale wiersz dzielony jest na komórki za pomocą znaczniak <td>. Przyjęte oznaczenia podziałów na „tr” i „td” pochodzą od nazw angielskich odpowiednio „table row” (ang. wiersz tabeli) oraz „table data” (ang. dane zawarte w tabeli). Komórki tabel mogą zawierać praktycznie wszystkie struktury definiowane w HTML a więc: dane tekstowe, obrazki, listy, formularze, tabele itd. Przykład użycia prostej tabeli pokazany jest poniżej. <table border="1"> <tr> <td>wiersz 1, komórka 1</td> <td> wiersz 1, komórka 2</td> </tr> <tr> <td> wiersz 2, komórka 1</td> <td> wiersz 2, komórka 2</td> </tr> </table> Wynik wyświetlenia w oknie przeglądarki podanej w przykładzie składni pokazany jest poniżej. wiersz 1, komórka 1 wiersz 1, komórka 2 wiersz 2, komórka 1 wiersz 2, komórka 2 Parametr border Jeśli w trakcie tworzenia tabeli nie zostanie parametr „border” zostanie utworzona tabela w której zostaną wyłączone linie rozdzielające poszczególne komórki. W niektórych wypadkach taka sposób prezentacji tabeli jest oczekiwany jednak w innych konieczne jest zdefiniowanie parametru „border”. Steruje on szerokością obramowania (wyrażoną w pikselach) wyświetlanego wokół poszczególnych komórek. W poniższym przykładzie szerokość obramowania ustawiona jest na 2 piksele. <table border="2"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> Nagłówki tabel W HTML nagłówki tabel definiowane są poprzez znacznik <th>. Poniższy przykład pokazuje sposób ich użycia w dokumencie. <table border="1"> <tr> <th>Nagłówek 1</th> <th>Nagłówek 2</th> </tr> <tr> <td>wiersz 1, komórka 1</td> <td> wiersz 1, komórka 2</td> </tr> <tr> <td> wiersz 2, komórka 1</td> <td> wiersz 2, komórka 2</td> </tr> </table> Wynik wyświetlenia w oknie przeglądarki podanej w przykładzie składni pokazany jest poniżej. Nagłówek 1 Nagłówek 2 wiersz 1, komórka 1 wiersz 1, komórka 2 wiersz 2, komórka 1 wiersz 2, komórka 2 Puste komórki tabeli w większości przeglądarek nie są wyświetlane. Dlatego jeśli potrzebne jest pokazanie iż komórka nie zawiera zawartości konieczne jest dodanie zawartości w postaci białego znaku (np. ) <table border="1"> <tr> <td> wiersz 1, komórka 1</td> <td> wiersz 1, komórka 2</td> </tr> <tr> <td> wiersz 2, komórka 1</td> <td> </td> </tr> </table> Co spowoduje wyświetlenie: Nagłówek 1 Nagłówek 2 wiersz 1, komórka 1 wiersz 1, komórka 2 wiersz 2, komórka 1 Parametry rowspan i colspan Niejednokrotnie tworząc tabelę występuje konieczność połączenia ze sobą kilku wierszy lub kolumn tabeli. W HTML zdefiniowane są dwa parametry odpowiedzialne za wykonanie takiej czynności. Są to parametry „rowspan” pozwalający na połączenie ze sobą wierszy tabeli oraz „colspan” łączący kolumny. Przykładowe wykorzystanie omawianych parametrów pokazane jest poniżej. <table border="1"> <tr> <th>Nagłówek 1</th> <th colspan=2>Nagłówek 2 i 3</th> </tr> <tr> <td> wiersz 1, <td> wiersz 1, <td> wiersz 1, </tr> <tr> <td> wiersz 2, <td rowspan=2> <td> wiersz 2, </tr> <tr> <td> wiersz 3, <td> wiersz 3, </tr></table> komórka 1</td> komórka 2</td> komórka 3</td> komórka 1</td> wiersz 2 i 3, komórka 2</td> komórka 3</td> komórka 1</td> komórka 3</td> Wykonanie powyższego kodu spowoduje wyświetlenie: Nagłówek 1 Nagłówek 2 i 3 wiersz 1, komórka 1 wiersz 1, komórka 2 wiersz 1, komórka 3 wiersz 2, komórka 1 wiersz 2, komórka 3 wiersz 3, komórka 1 wiersz 2 i 3, komórka 2 wiersz 3, komórka 3 Znaczniki tabel Znacznik <table> <th> <tr> <td> <caption> <colgroup> <col> <thead> <tbody> <tfoot> Opis Definiuje tabelę Definiuje nagłówek tabeli Definiuje wiersz tabeli Definiuje komórkę danych Definiuje tytuł tabeli Definiuje grupę kolumn tabeli Definiuje wartość atrybutu dla jednej lub większej ilości kolumn w tabeli Definiuje nagłówek grupy komórek tabeli Definiuje ciało grupy komórek tabeli Definiuje stopkę grupy komórek tabeli Listy HTML Składnia HTML wspiera kilka rodzajów list: uporządkowane, nieuporządkowane oraz listy definicji. Listy nieuporządkowane Lista nieuporządkowana służy do tworzenia wyliczeń. Standardowo wypunktowania dla tego rodzaju list są w postaci małych czarnych punktów. Lista jest tworzona za pomocą znacznika <lo> otwierającego listę oraz znaczników <li> za pomocą których wprowadzane są kolejne elementy. Poniżej zaprezentowano najprostszą z możliwych postać listy nieuporządkowanej. <ul> <li>Składnik 1</li> <li>Składnik 2</li> </ul> Jej wygląd w oknie przeglądarki to: • Składnik 1 • Składnik 2 Wewnątrz listy może zostać umieszczona większości elementów HTML (np. paragrafy, obrazki, linki, inne listy itd.). Listy uporządkowane Lista uporządkowana pozwala na tworzenie wyliczeń w których każdy element listy posiada kolejny numer. Lista uporządkowana otwierana jest przy pomocy znacznika <ol>. Tak jak w poprzednim przypadku elementy listy są definiowane znacznikiem <li>. Prosty przykład listy uporządkowanej pokazany jest poniżej. <ol> <li>Składnik 1</li> <li>Składnik 2</li> </ol> W oknie przeglądarki pojawi się: 1. Składnik 1 2. Składnik 2 Zawartość listy może być identyczna jak w przypadku list nieuporządkowanych. Listy definicji Listy definicji nie służą do tworzenia wyliczeń bowiem nie zawierają ani wypunktowań ani numeracji. Zastosowanie tej listy pozwala na uzyskanie stałego wcięcia pozwalają na tworzenie zagnieżdżonych konspektów list. Definicja tego typu listy rozpoczyna się od znacznika <dl>. Kolejne elementy dodawane są za pomocą znaczników <dt> oraz <dd>. Najprostszy przykład użycia listy definicji pokazany jest poniżej. <dl> <dt>Poziom <dd>Poziom <dt>Poziom <dd>Poziom </dl> 1 2 1 2 Podpunkt Podpunkt Podpunkt Podpunkt 1</dt> 1</dd> 2</dt> 2</dd> Widok otrzymany w przeglądarce: Poziom 1 Podpunkt 1 Poziom 2 Podpunkt 1 Poziom 1 Podpunkt 2 Poziom 2 Podpunkt 2 Zawartość znacznika <dd> listy może nieuporządkowanych i uporządkowanych. być identyczna Znaczniki List Znacznik <ol> <ul> <li> Opis Definiuje listę uporządkowaną Definiuje listę nieuporządkowaną Definiuje element listy jak w przypadku list <dl> <dt> <dd> Tworzy listę definicji Tworzy definiowany termin Tworzy opis definiowanego terminu Formularze HTML Formularze HTML pozwalają na tworzenie elementów skojarzonych z określonym adresem URL, służących do wprowadzania danych wejściowych. Każdy z tych elementów posiada nadaną zazwyczaj wcześniej nazwę oraz wartość, opartą na oryginalnej wartości określonej w konie strony HTML bądź też wprowadzonej przez użytkownika. Formularz jest pewnym obszarem udostępnionym przez przeglądarkę na którym znajdują się elementy formularza takie jak: pola tekstowe, obszary tekstowe, rozwijalne menu, przyciski radiowe, i inne. Elementy formularza umożliwiają przede wszystkim interakcję z użytkownikiem poprzez udostępnienie mu możliwości wprowadzania danych. Formularz według składni HTML definiowany jest za pomocą znacznika <form>. <form> <input> <input> </form> Elementy umożliwiające wprowadzanie informacji Najczęściej używanym znacznikiem w obszarze formularz jest <input>. Pozwala on na zdefiniowanie elementów graficznych dostępnych na stronie WWW umożliwiających wprowadzanie danych. Typ elementu definiowany jest przy pomocy parametru „type”. W poniższej części opracowania przedstawione zostaną najczęściej używane elementy wejściowe formularza. Pola Tekstowe Pole tekstowe pozwala użytkownikowi wprowadzić do formularza wartości alfanumeryczne. Poniżej zaprezentowano sposób utworzenia prostego pola tekstowego. <form> Imię: <input type="text" name="imie"> <br> Nazwisko: <input type="text" name="nazwisko"> </form> Widok w oknie przeglądarki: Imię: Nazwisko: Uwaga: W większości dostępnych przeglądarek standardowa szerokość pola tekstowe umożliwia wprowadzenie ok 20 znaków. Po przekroczeniu liczby znaków zawartość jest przewijana w polu. Przełączniki Przełaczniki pozwalają na wybór jednej z kilku opcji. Przykład definicji grupy przełączników pokazano poniżej. <form> <input type="radio" name="plec" value="mezczyzna"> Mężczyzna <br> <input type="radio" name="plec" value="kobieta"> Kobieta </form> Widok w oknie przeglądarki jest następujący: Mężczyzna Kobieta W przypadku przełączników może zostać wybrana tylko jedna opcja. Pola wyboru Pola wyboru stosowane są wówczas gdy liczba opcji jest skończona i można dokonać wyboru wielokrotnego. Przykład zastosowania pól wyboru pokazano poniżej. <form> Odpowiedz na poniższe pytanie. <br /> Jesteś szczęśliwym posiadaczem: <br /> Żony: <input type="checkbox" name="preferencja" <br /> Kochanki: <input type="checkbox" name="preferencja" <br /> Gosposi: <input type="checkbox" name="preferencja" <br /> Zwierzaka: <input type="checkbox" name="preferencja" </form> value="zona" /> value="kochanka" /> value="gosposia" /> value="zwierzak" /> Widok w oknie przeglądarki jest następujący: Odpowiedz na poniższe pytanie. Jesteś szczęśliwym posiadaczem: Żony: Kochanki: Gosposi: Zwierzaka: Wysłanie formularza Po to aby wysłać formularz konieczne jest dołączenie do niego jeszcze kilku istotnych elementów. Pierwszym z nich jest przycisk „Submit”. Jest on kolejnym typem znacznika <input>, w którym parametr „type” posiada wartość „submit”. Kolejnym istotnym ustawieniem jest ustawienie parametru „action” dla znacznika formularza. Parametr ten powinien wskazywać na plik do którego zostaną wysłane wartości odczytane z elementów wejściowych formularza. Niestety HTML nie pozwala na przetwarzanie formularzy. Konieczne jest do tego użycie innych narzędzi działających po stronie serwera jak np. interpreter PHP. W poniższym przykładzie pokazany został formularz przygotowany do przesłania informacji do pliku „obsluga_fromularza.php” <form name="input" action="obsluga_formularza.php" method="get"> Nazwisko: <input type="text" name="uzytkownik"> <input type="submit" value="Prześlij dane"> </form> Widok dokumentu w przeglądarce. Prześlij dane Nazwisko: Jeśli w udostępnionym polu zostaną wprowadzone jakieś dane oraz przyciśnięty zostanie przycisk „Prześlij dane”, zawartość formularza przesłana zostanie do pliku „obsluga_formularza.php”. Plik ten powinien mieć możliwość ich zinterpretowania oraz wyświetlenia wyników przetwarzania. Znaczniki formularzy Znacznik <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> Opis Definiuje formularz pozwalający na wprowadzanie danych użytkownika Definiuje pola formularza Definiuje obszar tekstowy Definiuje etykietę dla pola sterującego Definiuje zestaw pól Definiuje etykietę zestawu pól Definiuje rozwijalną listę Definiuje grupę opcji Definiuje pojedynczą opcję Definiuje przycisk Ilustracje w HTML Specyfikacja HTML umożliwia umieszczanie ilustracji w publikowanych dokumentach. Po to aby w dokumencie umieścić element graficzny konieczne jest użycie znacznika <img>. Znacznik ten jest pusty, co oznacza iż posiada on jedynie parametry, oraz nie wymaga znacznika zamykającego. Wyświetlenie ilustracji w dokumencie wymaga ustawienia co najmniej parametru „src” (ang. source – źródło). Wartością tego parametru jest URL wskazujący na położenie grafiki która ma być umieszczona na stronie. Najprostsza składnia pozwalające na umieszczenie grafiki w dokumencie podana jest poniżej. <img src="url"> URL wskazuje położenie pliku graficznego w zasobach lokalnych lub sieciowych. Przykładowy plik graficzny „obrazek.gif” umieszczony w zasobach lokalnych serwera w katalogu „grafiki” będzie wskazywany poprzez URL postaci „http://localhost/grafiki/obrazek.gif” lub też „grafiki/obrazek.gif” Przeglądarka wstawia grafikę w miejscu w którym w dokumencie źródłowym znajduje się znacznik <img>. Parametr alt Parametr „alt” jest wykorzystywany do umieszczenia tekstu alternatywnego dla dla grafiki. Wartością tego znacznika jest dowolny tekst wprowadzony przez autora strony. Tekst alternatywny wykorzystywany jest w przypadku kiedy obrazek z jakiejś przyczyny nie może zostać wyświetlony. Sytuacje takie często zdarzają się gdy klient pracuje w sieci z ograniczonym pasmem transmisji a grafika zajmuje stosunkowo duży zasób pamięci. Tekst alternatywny wyświetlany jest również zamiast obrazka w przeglądarkach pracujących w trybie tekstowym. Przykład definicji tekstu alternatywnego podany jest poniżej. <img src="obrazek.gif" alt="Taki zwykly obrazek"> Wskazówka Jeśli na stronie zostało umieszczone 10 obrazków to istnieje potrzeba wczytania przez przeglądarkę co najmniej jedenastu plików po to aby strona została wyświetlona poprawnie. Oczywiście wczytanie każdego pliku zajmuje określoną ilość czasu dlatego obrazy na stronie należy stosować z umiarem. Znaczniki grafik Tag <img> <map> <area> Description Definiuje ilustrację Definiuje mapę obrazową Definiuje obszary na mapie obrazowej z możliwością przypisania odnośników URL - Uniform Resource Locator URL jest adresem do jakiegoś zasoby lokalnego lub znajdującego się w sieci podanym w sposób standaryzowany. Pełny adres sieciowy w postaci http://www.agh.edu.pl/uczelnia/wydzialy_spis.php musi spełniać kilka reguł związanych z jego budową. Ogólny schemat adresu jest podany poniżej: serwis://host.domena:port/ścieżka/nazwapliku Gdzie: – serwis definiuje typ wykorzystywanego serwisu internetowego. Najczęstszym ustawieniem jest tu http. – domena definiuje internetową nazwę domenową serwera. W naszym przykładzie agh.edu.pl – host wskazuje na serwer do którego kierowane jest żądanie. Jeśli zostanie pominięty standardowo dla protokołu http przyjęta zostanie wartość www. – :port określa numer portu na którym nasłuchuje serwer. Numer portu zazwyczaj jest pomijany. Standardowy port dla protokołu http to 80. – ścieżka definiuje ścieżkę dostępu do danego zasobu na serwerze (najczęściej jest to katalog w którym przechowywane są publikowane pliki). Jeśli ścieżka dostępu nie jest podana żądany dokument musi znajdować się w katalogu głównym serwera WWW. – nazwapliku jest nazwą żądanego dokumentu. Jeśli nie jest podana podjęta zostanie próba wyszukania dokumentu o standardowej nazwie np. default.asp, index.html, index.php zależnie od ustawień serwera. Serwisy URL Poniżej wymienione zostały najczęściej używane serwisy dostępne poprzez URL: Serwis Dostęp file ftp http gopher news telnet WAIS plik umiejscowiony w zasobach serwera plik w zasobach serwera FTP plik w zasobach serwera WWW plik w zasobach serwera Gopher grupa Usenet news połączenie za pomocą protokołu telnetem plik na serwerze WAIS Przykłady dostępu do serwisów: Dostęp do grupy newsowej Poniższy zapis HTML tworzy łącze do serwisu news: <a href="news:alt.html">HTML Newsgroup</a> Pobranie pliku z serwera FTP Poniższy zapis HTML: <a href="ftp://www.agh.edu.pl/download/AGH-Twoj_najlepszy_wybor.zip">Pobierz plik</a> tworzy odnośnik „Pobierz plik” pozwalający na pobranie pliku AGHTwoj_najlepszy_wybor.zip. (W rzeczywistości link ten nie będzie działał i został utworzony jedynie w celu edukacyjnym. W chwili powstawania tego opracowania plik dostępny był pod podanym adresem jednak w zasobach serwera WWW.) Odnośnik do lokalnego programu pocztowego Poniższy zapis HTML: <a href="mailto:[email protected]">Poczta Piotra K.</a> utworzy odnośnik do lokalnego programu zarządzającego pocztą w postaci : Poczta Piotr K. Przykład Jako przykład wykorzystania niektórych możliwości opisanych wyżej znaczników, przedstawiono poniżej kod strony zawierającej prosty formularz i grafikę umieszczoną w tabeli. przykład 1. pierwsza strona <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Laboratorium SKBD - HTML <style type="text/css"> A:link { COLOR: Yellow; A:active { COLOR: Yellow; A:visited{ COLOR: #FF8040; A:hover { COLOR: Yellow; </style> </head> </title> TEXT-DECORATION: TEXT-DECORATION: TEXT-DECORATION: TEXT-DECORATION: none} <!-- zmiana kolorów odnośników --> none} none} underline} <body text="white" bgcolor="black"> <img src="1.gif" border=0 height=50> <!-- gif jednopikselowy pozwalajacy na ustawienie odstępu width i height --> <center> <font face="Thaoma" size=5 color="#FBA609">KATEDRA ROBOTYKI I MECHATRONIKI</font> </center> <hr width="100%" align="center" color="Silver" size=1> <!-- pozioma linia --> <form method="post" action="mailto:[email protected]"> <!-- początek formularza --> <table cellpadding=5 cellspacing=5 bgcolor="black" align="center"> <!-- tabela ułatwiająca formatowanie formularza --> <tr> <td rowspan=3><img src="test.gif" alt="oczy" border=0> </td> <td align="right">Imię</td> <td colspan=2><input type="text" name="imie" size=20 maxlength=20 tabindex=1></td> </tr> <tr> <td align="right">Nazwisko</td> <td colspan=2><input type="text" name="nazwisko" size=20 maxlength=40 tabindex=2></td> </tr> <tr> <td align="right">Wiek</td> <td><select name="wiek"> <option value="1-10 lat">1-10 lat <option value="11-20 lat">11-20 lat <option value="21-30 lat">21-30 lat </select></td> <td align="right"><input type="submit" name="wyslij" value="wyslij" align="right"></td> </table> </form> <hr width="100%" align="center" color="Silver" size=1> <center><font face="thaoma" size=2>Sieci Komputerowe i Bazy Danych ©2003 <a href="http://www.agh.edu.pl" target="AGH">AGH</a></font></center> </body> </html> pliki 1.gif oraz test.gif można znaleźć na koncie student serwera 149.156.115.209. Wygląd strony pokazano na rysunku poniżej. Zadania do wykonania W ramach zajęć należy sporządzić dokument HTML będący szkieletem nawigowalnego systemu umożliwiającego komunikację z bazą danych, który będzie tworzony na następnych zajęciach. W tym celu należy: a) stworzyć plik dokumentu zazwyczaj index.html b) umieścić w dokumencie tabelę o trzech wierszach i dwóch kolumnach dzielących środkowy wiersz w stosunku 30%/70%, oraz ustawić jej atrybuty c) W lewym 30% panelu należy zaprojektować menu pozwalające w przyszłości na nawigacje po systemie bazy danych. W chwili obecnej menu powinno zawierać 4-5 linków do dowolnych dokumentów html. d) W prawym panelu należy zaprojektować formularz pozwalający na uzyskanie odpowiedzi na temat wybranej przez siebie ankiety, i wysłanie tych odpowiedzi pocztą elektroniczną (np. mailto:[email protected]).
