Na dzisiejszym wykładzie powiemy sobie o języku znaczników, odmianach tych języków, o technologii SGMLA, HTML. Zacznijmy od języków znaczników. Język znaczników to format dokumentu, który obok treści zawiera także opisujące ją informacje. Informacje te dotyczą danych na temat znaczenia lub wyglądu dokumentu i są wyrażane poprzez umieszczone w tekście znaczniki. Języki znaczników są także wykorzystywane w przemyśle publikacji do wymiany dokumentów pomiędzy autorami, redaktorami oraz drukarniami. Języki znaczników dzielimy na 3 klasy: prezentacyjne, proceduralne i procedurowe. W rzeczywistości różne odmiany znakowania mogą wystąpić w danym systemie jednocześnie. Język HTML zawiera elementy czysto proceduralne (znacznik b odpowiadający za pogrubienie), oraz czysto opisowe (znacznik strong oznaczający ważny fragment tekstu). Ponadto HTML zawiera element pre, wyróżniający obszary znakowania prezentacyjnego, których zawartość ma zostać wyświetlona na ekranie dokładnie tak, jak została umieszczona w dokumencie. Znakowanie prezentacyjne usiłuje wywnioskować strukturę dokumentu wyłącznie ze sposobu rozmieszczenia jego zawartości. Przykładowo tytuł dokumentu może zostać poprzedzony kilkoma znakami nowej linii lub spacji, co ma sugerować marginesy oraz efekt centrowania. Procesory tekstu oraz oprogramowanie przygotowujące dokumenty do druku podejmuje niekiedy próby wywiedzenia struktury dokumentu za pomocą podobnych konwencji, lecz ogromne zróżnicowanie stylów znakowania sprawia, że starania te pozostają bezskuteczne. Znakowanie proceduralne także definiuje prezentację tekstu, lecz jego znaczniki są zazwyczaj widoczne dla osoby edytującej plik tekstowy. Oprogramowanie interpretuje tokeny w kolejności ich pojawienia się. Formatowany tytuł byłby bezpośrednio poprzedzony ciągiem dyrektyw, nakazujących aplikacji przejście w tryb centrowania, następnie powiększenie oraz wytłuszczenie czcionki. Po tytule następuje kolejna seria rozkazów usuwających zastosowane efekty. W bardziej zaawansowanych systemach procedura ta zostaje uproszczona poprzez zastosowanie makr lub stosu. W większości przypadków mechanizmy umożliwiające znakowanie proceduralne są wyposażone w języki programowania spełniające kompletność Turinga. Przykładami mogą być języki: nroff, troff, TeX, Lout oraz PostScript. Znakowanie proceduralne jest często używane w profesjonalnych systemach publikacji, gdzie od specjalistów w dziedzinie typografii oczekiwana jest znajomość odpowiednich języków. Popatrzmy, jak wygląda taki przykładowy program napisany w języku TeX, oraz jak by wyglądało jego wykonanie:
Znakowanie opisowe (inaczej semantyczne) także opatruje fragmenty tekstu znacznikami, jednak narzucają im one żadnego wyglądu ani szczególnego traktowania podczas interpretowania dokumentu. Przykładowo język syndykacji treści Atom posiada znacznik updated, który określa datę ostatniej modyfikacji fragmentu dokumentu. Specyfikacja Atomu omawia znaczenie znacznika updated i określa format jego zapisu, nie zawiera jednak wskazówek dotyczących tego, w jaki sposób i czy w ogóle prezentować go użytkownikowi końcowemu. Oprogramowanie może użyć tego znacznika na rozmaite sposoby, w tym takie, które nie zostały przewidziane przez twórców języka Atom. SGML oraz XML to metajęzyki zaprojektowane specjalnie pod kątem tworzenia języków opisowych. Za główną zaletę znakowania opisowego uznaje się jego elastyczność. Fragmenty tekstu znakuje się zgodnie z rolą, którą spełniają w dokumencie, zamiast określać ich oczekiwany wygląd. Oprogramowanie obsługujące dokument przetwarza je na wiele użytecznych sposobów, które nie muszą być zaplanowane przez projektantów języka. Odnośniki w języku HTML, początkowo przeznaczone do opisu metadanych, są obecnie szeroko używane przez wyszukiwarki internetowe, które na ich podstawie odkrywają nowy materiał do zaindeksowania oraz oceniają popularność sieciowych zasobów. (dodatkowe mechanizmy klasyfikacji i oceny zawartości). Znakowanie opisowe ułatwia także zmianę formatowania dokumentu zgodnie ze zmieniającymi się potrzebami użytkowników, ponieważ specyfikacja wyglądu dokumentu nie jest przemieszana z jego zawartością. Dobrym przykładem jest tu yastosowanie znacznika kursywy, który może zostać zastosowany w tekście zarówno w celu nadania emfazy, jak i wyróżnienia słów obcego pochodzenia.Jednak jeżeli oba przypadki są oznaczone (prezentacyjnie lub proceduralnie) jedynie jako pochyła czcionka, ta wieloznaczność treści może nie zostać w łatwy sposób rozróżniona. Rodzi to konieczność rozróżnienia znaczenia semantycznego interpretacji fragmentów dokumentu. Jeżeli te dwa przypadki zostaną opisane za pomocą odmiennych znaczników, każdy z nich może zostać w przyszłości przeformatowany bez zmian w sposobie prezentacji drugiego.
Przejdźmy teraz do techonologii SGML. Jest to uogólniony język znaczników ujednolicający struktury i format różnego typu danych. Pozwala zapisać je w formie dokumentu tekstowego i w związku z tym jest łatwo przenoszalny renderowalny w różnych systemach elektronicznego przekazu danych. SGML w przeciwieństwie od języków znaczników dedykowanych (takich jak HTML) nie jest określonym zbiorem znaczników i reguł ich użytkowania, a nadrzędnym językiem służącym do definiowania dowolnych znaczników i ustalania zasad ich poprawnego użytkowania. Języka SGML używa się praktycznie do dwóch celów. Między innymi do precyzyjnego definiowania zbiorów znaczników przeznaczonych do konkretnych zastosowań – przykładem jest język HTML, jak również do ujednolicania zasad pisania i przekazywania dokumentów tekstowych w obrębie dużych firm lub instytucji. W obydwu przypadkach dokument w języku SGML składa się z trzech części: Między innymi z deklaracji dokumentu, która definiuje ogólne reguły stosowane w zapisie dokumentu (przykładowo maksymalna długość nazwy elementu, znak używany jako początek znacznika - znak < ), jak również z DTD, czyli definicji typu dokumentu - definicji wszystkich znaczników i reguł ich stosowania. No i oczywiście z właściwego dokumentu, czyli tekstu wraz ze znacznikami. SGML jest złożonym językiem, co jest powodem bardzo mało narzędzi implementuje pełen standard. Zwykle edytory SGML obsługują większość powszechnie używanych elementów języka i interpretują jedynie część pliku deklaracyjnego. W związku z trudnościami implementacyjnymi powstał język i standard XML będący początkowo podzbiorem reguł SGML (pierwsza wersja powstała w 2000 roku). Standard XML można obsługiwać narzędziami SGML-owymi modyfikując odpowiednio plik deklaracyjny. Ponieważ w praktyce zarówno deklaracja dokumentu SGML jak i DTD zaszyte są najczęściej w oprogramowaniu (w przypadku języka HTML w przeglądarkach i programach do pisania stron WWW), użytkownicy końcowi, nie mają bezpośredniej styczności z DTD tej odmiany języka SGML, z której właśnie korzystają. Język ten jest jednak tylko językiem teoretycznym i w praktyce nie jest stosowany.
No i teraz kolej na technologię HTML. Jest to język wykorzystywany do tworzenia stron internetowych. Opisuje strukturę danych zawartych w dokumencie nadając znaczenie poszczególnym fragmentom tekstu formując elementy dokumentu oraz osadzając w tekście dodatkowe obiekty obrazy, interaktywne formularze, dynamiczne animacje.
W składni języka HTML wykorzystuje się znaczniki opatrzone z obu stron nawiasami ostrokątnymi. Język HTML umożliwia, zdefiniowanie sposobu
wizualnej prezentacji dokumentu w przeglądarce internetowej,
a także osadzanie ciągów instrukcji języków skryptowych,
wpływających na zachowanie przeglądarek lub innych
parserów HTML. Wykorzystując HTML zaleca się zrezygnowanie z wykorzystywania znaczników opisujących wygląd strony na rzecz kaskadowych arkuszy stylów CSS.
Ważną cechą języka, która przyczyniła się do rozpowszechnienia usługi WWW jest niezależność od systemu operacyjnego oraz parametrów sprzętowych komputera, na którym strony te będą oglądane. HTML został napisany w oparciu o język SGML, jednak nie posiadał formalnej definicji w SGML-u. W 1993 r., organizacja IETF opublikowała pierwszą propozycję specyfikacji języka HTML autorstwa Bernersa-Lee i Dana Connolly - Hypertext Markup Language (HTML) Internet-Draft - zawierającą opis gramatyki w postaci SGML Document Type Definition (definicja typu dokumentu). Opierając się na tym dokumencie twórcy przeglądarek eksperymentowali z HTML-em modyfikując atrybuty istniejących już znaczników oraz dodając całkowicie nowe. Podobnie Dave Raggett pod koniec roku 1993. w swoim szkicu HTML+ (Hypertext Markup Format) sugerował standaryzację już zaimplementowanych znaczników np. związanych z tworzeniem tabel i formularzy. Język ten składa się z kilku kluczowych komponentów. Między innymi ze znaczników (i ich atrybutów), typów danych, referencji znakowych, odwołań w postaci encji, oraz deklaracji typu dokumentu. Słowami znacznik i tag określa się znacznik otwierający (wraz z zamykającym) w znaczeniu elementu składni języka HTML. Słowa element używa się zamiennie ze słowami znacznik lub tag.
Niektóre elementy nie wymagają znaczników końcowych (przykładowo znacznik <p> odpowiadający za nowy akapit) lub ich nie mają (<img> wstawiający obrazek lub <br> łamiący linię). Jak każdy język ma on swoje wady i zalety. Zalety, to prostota użycia oraz nauki języka. Kolejną ważną zaleta jest to, że jest to technologia zorientowana na warstwę prezentacji, jak również technologia ogólnie dostępna. Jeśli chodzi o wady, to HTML nie jest językiem reprezentacji danych, nie zawiera mechanizmów rozróżnienia znaczenia oraz zawartości. Ponadto dane nie mogą być organizowane w hierarchię, istnieje ograniczony zbiór znaczników, oraz język ten ma słabe właściwości przeszukiwania. Oto, jak wygląda kod napisany w tym języku:
<HTML>
<HEAD>
<META
http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE> Tytuł strony </TITLE>
</HEAD>
<BODY>
Właściwa treść (ciało) dokumentu
</BODY>
</HTML>
<HTML> dokument HTML </HTML> to tag oznaczający dokument HTML, wewnątrz tego znacznika znajdują się tagi nagłówka <HEAD> oraz tagi części głównej dokumentu <BODY>.
Również wewnątrz tagu <HTML> powinny się znaleźć tagi dokumentów z ramkami. Tag ten może występować z parametrem oznaczającym wersję HTML użytą w danym dokumencie, jadnak zamiast tego parametru, używa się tagu <!DOCTYPE>. <HEAD> nagłówek dokumentu HTML </HEAD> to tag nagłówka dokumentu. Zawiera informacje o tytule dokumentu, metainformacjach czy bazowych odwołaniach. Powyższe informacje wprowadza się za pomocą tagów: <BASE>, <ISINDEX>, <LINK>, <META>, <NEXTID>, <TITLE> umieszczonych wewnątrz tagu <HEAD>. W jego wnętrzu można umieścić również kody źródłowe skryptów JavaScript za pomocą tagu <SCRIPT>. Tych znaczników HTML jest wiele i my sobie je ominiemy. Skupimy się natomiast na bardzo ważnym znaczniku formularzy FORM, który będize nas interesował. <FORM> pola formularza </FORM> to nic innego, jak tag, który służy do tworzenia interaktywnych formularzy do przesyłania danych bezpośrednio ze strony WWW do serwera gdzie zostaną one przetworzone przez odpowiednie skrypty obsługujące dany formularz lub do dynamicznego tworzenia dokumentów. Do definiowania odpowiednich pól formularza służą tagi: <INPUT>, <OPTION>, <TEXTAREA>, <SELECT> i powinne się one znaleźć wewnątrz tagu <FORM>. Wyróżniamy dwa pozdstawowe parametry tagu: ACTION="URL", oraz METHOD="metoda". Ten pierwszy to parametr, który określa, gdzie mają zostać przesłane dane z formularza. Parametr może przyjmować wartość http://domena.pl/skrypt.rozszerzenie, czyli adres URL, w którym dane wpisane do formularza zostaną odpowiednio przetworzone. (Dane z formularza są dołączone do adresu URL. Przetworzeniem tych danych zajmują się odpowiednie skrypty, najczęściej są to skrypty CGI (Comon Gateway Interface)), jak również mailto:osoba@domena.pl - wartość ta pozwala na przesłanie danych z formularza przez pocztę elektroniczną za pomocą usługi MAILTO. I drugi z parametrów, to parametr METHOD. Parametr ten określa sposób w jaki mają zostać przekazane informacje z formularza do skryptu CGI i może mieć dwie wartości: POST, oraz GET. W przypadku tej pierwszej program pobiera informacje ze strumienia stdin, natomiast długość danej informacji jest określona przez zmienną środowiska serwera (enviroment) o nazwie CONTENT_LENGTH . Z kolei w przypadku tej drugiej, wartości są przekazywane w postaci ciągu znaków przedstawionych jako wartość zmiennej QUERY_STRING zdefiniowanej w środowisku serwera (enviroment). No i teraz powiedzmy nieco o tagach formularza. Pierwszy z nich to tag <INPUT>, po którym wpisujemy po odstepie opis pola. Tag ten pozwala na tworzenie pól tekstowych, pól wyboru checkbox oraz pól przycisków radio button. Mamy cztery parametry tego tagu: CHECKED, MAXLENGTH="n", NAME="nazwa", oraz SIZE="n", TYPE="typ", oraz VALUE="wartość". Parametr CHECKED pozwala na ustawienie danego pola opcji checkbox lub radio jako domyślne. Parametr MAXLENGTH określa maksymalną dlugość n tekstu, który ma zostać wprowadzony w dane pole. Parametr NAME z kolei jest nazwą pola i zmiennej, pod którą będzie podstawiona wprowadzana lub wybrana wartość, która zostanie przesłana do skryptu przetwarzającego dane. Natomiast parametr SIZE określa długość pola tekstowego, domyślnie n=20 znaków, natomiast informacja wpisywana w to pole może być dłuższa, ponieważ wprowadzany tekst będzie przewijany. Nastepny z parametrów to parametr TYPE. Określa on rodzaj danego pola i może mieć wartości:
• TEXT- Typ standardowy i oznacza pole tekstowe.
• CHECKBOX - Pole wyboru checkbox. Zmianę jego stanu możemy zmienić poprzez kliknięcie w to pole. Można ustawić takzwany stan aktywny pola poprzez zastosowanie parametru CHECKED. Możliwe jest też wybranie kilku pól jednocześnie.
• HIDDEN- Dane pole jest traktowane jako tekstowe przy czym nie jest wyświetlane, a wartości tego pola nie można zmienić. Może służyć w celu przesłania specjalnych informacji do skryptu przetwarzającego dane formularza.
• PASSWORD - Jest to specjalne pole tekstowe, w którym wprowadzane znaki są zastępowane gwiastkami. Pole to może służyć do wprowadzania haseł.
• RADIO - Pole radio jest podobne w działaniu po pola wyboru checkbox z tą różnicą, że jeśli jest zdefiniowanych w formularzu kilka pól radio to tylko jedno z nich może zostać wybrane. Są również przedstawiane trochę inaczej niż pola wyboru checkbox.
• RESET - wartość ta generuje przycisk, którego naciśnięcie spowoduje zresetowanie wprowadzonych danych we wszystkich polach i ustawienie wartości standardowych. Jego nazwę można zmienić za pomocą parametru VALUE="wartość".
• SUBMIT - Wartość ta generuje przycisk, którego naciśnięcie spowoduje wysłanie danych z formularza do skryptu w celu ich przetworzenia. Pole to musi pojawić się na końcu każdego formularza, jego nazwę można zmienić za pomocą parametru VALUE="wartość".
No i na koniec parametr VALUE. Parametr ten definiuje domyślną wartość w polu tekstowym lub nazwę na przyciskach. Nastepny z tagów formularza to tag <OPTION>, po którym po odstepie podajemy opis pozycji. Tag opcji musi zostać wywołany wewnątrz tagu <SELECT>. Pozwala on zdefiniować jedną pozycję menu. Mamy trzy parametry tagu: DISABLED, SELECTED i VALUE. Parametr DISABLED oznacza, że wybór tego pola jest zalecany. SELECTED to parametr, który pozwala oznaczyć dane pole jako domyślne, a jego ustawienie może zmienić użytkownik. I ostatni - VALUE definiuje wartość pola, która zostanie przesłana do skryptu jeśli dana pozycja została wybrana . Kolejny z tagów to tag <SELECT> opcje menu </SELECT>. Służy on do budowy rozwijanego menu. Ma podobną budowę do listy. W jego wnętrzu definiowane są pozycje menu za pomocą tagu <OPTION>, odpowiadającego za informacje w rozwijanym menu. Występują tu trzy parametry dla tego tagu: NAME="nazwa" , MULTIPLE, SIZE="n". Pierwszy z nich jest nazwą opcji i zmiennej, pod którą będzie podstawiona wprowadzana lub wybrana wartość, która zostanie przesłana do skryptu przetwarzającego dane. Drugi, czyli MULTIPLE umożliwia wybranie kilku pól, natomiast parametr SIZE określa ilość rozwijanych wierszy. n=1 oraz brak parametru SIZE spowoduje, że menu zajmie jeden wiersz i będzie rozwijane dopiero po jego wybraniu. I teraz na razie zakończymy temat znaczników i powiemy ogólnie o formularzach – jaka jest dokładnie ich potrzeba wykorzystania. Formularz ma formę elektronicznej ankiety, którą wypełnia się wprost na stronie. Możliwe jest przy tym wpisywanie tekstu, odpowiadanie na zadane pytania, czy zaznaczanie jednej bądź kilku z podanych możliwości wyboru. Formularz może być przesłany pocztą elektroniczną e-mail (prosty formularz pocztowy) a następnie odebrany przez adresata. Istnieje wiele programów wspomagających odbieranie formularzy i grupowe wysyłanie listów na ich podstawie, przez co czynność ta może stać się mniej żmudna. Aplikacje w postaci programów instalowanych, jak i specjalne skrypty wykonywane bezpośrednio w przeglądarce (przykładowo skrypty PHP, JSP). Teraz nieco o budowie. Wewnątrz formularza muszą się znaleźć element edytowalny przez użytkownika (INPUT), oraz przycisk powodujący wysłanie formularza (SUBMIT). Kolejnym ważnym punktem jest akcja, która jest wykonywana przez komputer, gdy czytelnik strony zechce przesłać do autora jakieś informacje. Formularz wysyła dane definiowane przez specjalne polecenie action=wybrana_akcja. Należy również określić sposób komunikowania się przeglądarki 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. Ustawienie metody GET jest wymagane przez skomplikowane serwisy korzystające z mechanizmu wyszukiwania. Ustawienie metody POST poleca przeglądarce przesłać dane formularza pod adresem wskazanym parametrem ACTION. Zobaczmy teraz jak wyglądają przykłady elementów formularzy:
TEXTFIELD RADIOBUTTON
CHECKBOX COMBOBOX
TEXTAREA
<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain">
<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name" value="yourname" size="20"><br>
Mail:<br><input type="text" name="mail" value="yourmail" size="20"><br>
Comment:<br> <input type="text" name="comment" value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Jeśli chodzi o pisanie stron internetowych HTML, to każdy edytor tekstowy może być wykorzystany jako edytor języka HTML. Najbardziej znane to: Notepad, Notepad++, Word, Word Perfect, Lotus AmiPro. Można też wykorzystać rozszerzenia śr...
i7xn1