JĘZYK HTML PODSTAWY
Publikowanie dokumentów w WWWTworzenie dokumentów w jezyku HTMLPodstawowe elementy dokumentuPodstawowy szkielet dokumentuNaglówkiNormalne akapity Listylisty uporzadkowanelisty nieuporzadkowanelisty zagniezdzanelisty definicyjneTypy akapitówFormatowanie tekstuZnaczniki specjalnePołączeniaWstawianie rysunkówUzywanie rysunków jako odnosnikówHTML dla zaawansowanych
Publikowanie dokumentów w WWWWorld Wide Web (WWW) jest chyba najbardziej popularna usluga w sieci Internet. Zawdziecza to przede wszystkim latwemu sposobowi dostepu do informacji oraz polaczeniu danych tekstowych z grafika i innymi elementami multimedialnymi (dzwiek, wideo, animacje). Ponadto informacje w WWW moga zawierac odwolania do innych danych znajdujacych sie na dowolnym serwerze WWW. Z poziomu WWW mozna siegac do innych uslug sieciowych, takich jak Gopher, FTP, Telnet, WAIS. Dostep do danych w WWW zapewniaja specjalne programy zwane przegladarkami World Wide Web (Web Browsers). Do najpopularniejszych naleza: Mosaic, Netscape Navigator i WebSurfer (z pakietu Chameleon). Dokumenty World Wide Web sa zapisywane w jezyku HTML (HyperText Markup Language). Jest on oparty na standardzie SGML (Standard Generalized Markup Language ) sluzacym do definiowania jezyków opisujacych strukture dokumentów. Jezyk HTML caly czas sie rozwija i jest stale wzbogacany w nowe elementy. Niniejszy artykul ma na celu zaprezentowanie podstaw tworzenia dokumentów w jezyku HTML, które mozna nastepnie udostepnic na jakims serwerze WWW lub wykorzystac lokalnie na wlasnym komputerze. Tworzenie dokumentów w jezyku HTMLDokumenty w jezyku HTML sa zapisywane w zwyklym formacie tekstowym i moga powstawac w dowolnym edytorze tekstów. Dostepne sa tez wyspecjalizowane programy wspomagajace tworzenie dokumentów w HTML, badz to jako samodzielne edytory (np. HoTMetaL firmy SoftQuad), badz jako nakladki na popularne procesory tekstów (np. Microsoft Internet Assistant dla Worda 6.0). Nawet uzywajatych narzedzi dobrze jest jednak poznac zasady tworzenia dokumentów w jezyku HTML, aby móc wzbogacic generowane dokumenty w dodatkowe elementy czy tez wykorzystac pomysly zastosowane na najlepszych stronach WWW. Jezyk HTML definiuje strukture dokumentu, tzn. okresla, które fragmenty tekstu stanowia naglówki, które listy, a które normalne akapity. W mniejszym stopniu natomiast zajmuje sie bezposrednim formatowaniem dokumentu (np. okreslaniem typów i wielkosci czcionek). Sposób wyswietlania poszczególnych stylów dokumentu mozna skonfigurowac w swojej przegladarce WWW. Podstawowe elementy dokumentuW jezyku HTML wystepuja specjalne znaczniki (markup tags), które okreslaja styl poszczególnych elementów dokumentu. Znacznik jest tekstem ujetym w nawiasy ostre <>. W wiekszosci przypadków nie jest istotne, czy znaczniki beda pisane malymi czy duzymi literami. Spacje, tabulacje i znaki końca linii sa (z pewnymi wyjatkami) ignorowane w jezyku HTML. Podstawowym znacznikiem obecnym w kazdym dokumencie jest <html>. Dokument w jezyku HTML powinien sie rozpoczynac od znacznika <html> i kończyc znacznikiem </html>. Wiekszosc znaczników wystepuje wlasnie parami: znacznik poczatkowy majacy postac <znacznik> i końcowy postaci </znacznik>. U góry dokumentu (pod poleceniem <html>) powinien znalezc sie naglówek dokumentu. Rozpoczyna sie on znacznikiem <head>, a kończy znacznikiem </head>. Elementem, który zawsze powinien wystapic w naglówku jest tytul dokumentu zawarty pomiedzy poleceniem <title> a poleceniem </title>. Tytul jest wyswietlany w przegladarkach WWW w tytule okna programu lub w specjalnie na to przeznaczonym miejscu. Sluzy tez do identyfikowania ostatnio przegladanych dokumentów lub dokumentów zapamietanych jako szczególnie dla nas interesujace (hotlists). Dlatego tez tytul powinien w mozliwie jasny i zwiezly sposób opisywac zawartosc danego dokumentu. Pod naglówkiem dokumentu umieszczony jest wlasciwy tekst dokumentu ograniczony poleceniami <body> i </body>. Tekst ten jest wyswietlany jako strona WWW przez przegladarki WWW. Podstawowy szkielet dokumentu wyglada zatem tak:<html><head><title>Próbny dokument</title></head><body>...</body></html>NaglówkiJezyk HTML dobrze nadaje sie do definiowania dokumentów o hierarchicznej strukturze odzwierciedlanej przez naglówki, podnaglówki, podpodnaglówki itd. Zazwyczaj w dokumencie okresla sie jeden naglówek glówny, bedacy tytulem calego dokumentu (jest on zwykle powtórzeniem tekstu umieszczonego po poleceniu <title>). Naglówek glówny definiuje sie umieszczajac jego tekst pomiedzy znacznikami <h1> a </h1>, zas dalsze poziomy naglówków - w analogiczny sposób - poprzez polecenia <hx> i </hx>, gdzie x jest poziomem naglówka. Normalne akapity Pod naglówkami mozemy normalnie wpisac tekst, który ma byc wyswietlany. W miejscu, gdzie chcemy zakończyc akapit wstawiamy znacznik <p>. Tekst znajdujacy sie pomiedzy kolejnymi znacznikami <p> bedzie wyswietlany w przegladarce jako jeden akapit niezaleznie od tego, w ilu wierszach go wpisalismy i jak te wiersze podzielilismy. Znacznik <p> sluzy jedynie jako separator akapitów. Rózni sie od dotychczas poznanych znaczników tym, ze nie wystepuje jako para znaczników obejmujaca definiowany tekst. (Jedna z propozycji w najnowszej wersji jezyka HTML jest definiowanie normalnych akapitów poprzez ujecie tekstu pomiedzy znaczniki <p> i </p>. Wiekszosc przegladarek juz obecnie poprawnie interpretuje oba sposoby zapisu akapitów.) Poszerzmy nasz przykladowy dokument o nowo poznane elementy:<html><head><title>Próbny dokument</title></head><body><h1>Próbny dokument</h1><h2>Czesc pierwsza</h2>To jest tekst czesci pierwszej.Tekst ten jest wyswietlany jako jeden akapit.<p><h2>Czesc druga</h2>To jest pierwszy akapit czesci drugiej.<p>A to jest drugi akapit czesci drugiej.<p></body></html>Rysunek 1 przedstawia powyzszy dokument wyswietlany przez przegladarke WWW. ListyJezyk HTML umozliwia definiowanie trzech rodzajów list: listy uporzadkowane, nieuporzadkowane i definicyjne. Elementy list uporzadkowanych sa zwykle wyswietlane przez przegladarki jako numerowane kolejnymi liczbami. Lista uporzadkowana zaczyna sie od znacznika <ol>, a kończy znacznikiem </ol>. Poszczególne elementy listy sa poprzedzane znacznikiem <li>. Ten znacznik nie ma swojego odpowiednika końcowego, wystepuje pojedynczo. Oto przyklad listy uporzadkowanej: <ol><li>pierwszy element<li>drugi element<li>trzeci element</ol>Elementy list nieuporzadkowanych sa zwykle poprzedzane w przegladarkach duza kropka (lub innym znakiem typu "bullet"). Lista nieuporzadkowana rozpoczyna sie znacznikiem <ul>, a kończy znacznikiem </ul>. Poszczególne elementy listy sa równiez poprzedzane znacznikiem <li>. Oto przyklad listy nieuporzadkowanej: <ul><li>pierwszy element<li>drugi element<li>trzeci element</ul>Listy moga byc zagniezdzane, to znaczy mozna umiescic liste wewnatrz innej listy, np.:<LISTING6>><ol><li>lwy<li>slonie (lista zagniezdzona)<ul><li>indyjskie<li>afrykańskie</ul><li>zyrafy</ol>Z kolei lista definicyjna rozpoczyna sie od znacznika <dl>, a kończy znacznikiem </dl>. Kazdy element listy definicyjnej sklada sie z dwóch czesci: terminu i jego definicji. Termin poprzedzany jest znacznikiem <dt>, a definicja znacznikiem <dd>. Oto przyklad listy definicyjnej:<dl><dt>pierwszy termin<dd>definicja pierwszego terminu<dt>drugi termin<dd>definicja drugiego terminu</dl>Zmodyfikujmy nasz przykladowy dokument, dodajac rózne rodzaje list: <html><head><title>Próbny dokument</title></head><body><h1>Próbny dokument</h1><h2>Lista zagniezdzona:</h2><ol><li>pierwszy element<ul><li>pierwszy podelement<li>drugi podelement</ul><li>drugi element<li>trzeci element</ol><h2>Slowniczek:</h2><dl><dt>WWW<dd>World Wide Web<dt>FTP<dd>File Transfer Protocol<dt>HTML<dd>HyperText Markup Language</dl></body></html>Rysunek 2 przedstawia powyzszy dokument wyswietlany przez przegladarke WWW. Inne typy akapitówJezyk HTML wyszczególnia tez kilka innych znaczników formatujacych cale akapity. Czesto uzywanym elementem wstawianym na stronie WWW jest informacja o autorze umieszczana u dolu strony. Najczesciej informacje taka formatuje sie, wstawiajac ja miedzy poleceniami <address> i </address>. Akapity sformatowane jako <address> sa najczesciej wyswietlane kursywa przez przegladarki WWW. Przyklad:<address>Opracowanie i edycja: Jakub Niedzwiedz.</address>Innym uzywanym poleceniem formatujacym caly akapit jest <blockquote> i </blockquote>. Polecenia tego uzywa sie do umieszczania dluzszych cytatów w osobnym akapicie. Gdy zachodzi potrzeba wstawienia tekstu napisanego czcionka nieproporcjonalna i z zachowaniem spacji, tabulacji i znaków końca linii (np. przy wpisywaniu fragmentów kodów programów, tabel, itd.), to nalezy taki tekst poprzedzic znacznikiem <pre> i zakończyc znacznikiem </pre>. Przyklad:<pre>#include <stdio.h>void main(void)<printf("Hello World!");></pre>Formatowanie tekstu Poszczególne fragmenty tekstu mozna jeszcze wyróznic stosujac dodatkowe formatowanie. Mozna np. zawrzec dany fragment pomiedzy znacznikami <em> i </em> albo - by jeszcze mocniej go wyróznic - pomiedzy znacznikami <strong> i </strong>. Mozna tez bezposrednio zamienic wybrany tekst na kursywe ujmujac go pomiedzy znaczniki <i> oraz </i> lub zamienic go na tekst pogrubiony stosujacznaczniki <b> i </b>. Polecenia <em> i <strong> maja charakter logiczny i moga byc róznie interpretowane przez poszczególne przegladarki. Znaczniki specjalneW dowolnym miejscu dokumentu mozna wstawic komentarz, który nie bedzie wyswietlany przez przegladarke. Tekst, który ma byc komentarzem rozpoczyna sie od znaków <!--, a kończy znakami -->. Przyklad:<!--To jest komentarz.-->W celu oddzielenia kilku fragmentów tekstu w dokumencie wstawia sie pozioma linie przy uzyciu znacznika <hr>. Za pomoca znacznika <br> mozna wymusic w dowolnym momencie zlamanie wiersza, np.:Ten tekst <br>bedzie wyswietlony w dwóch wierszach.<p>Zastosujmy nowo poznane elementy jezyka HTML w naszym przykladowym dokumencie: <html><head><title>Próbny dokument</title></head><body><!--Tytul strony WWW--><h1>Próbny dokument</h1><h2>Czesc pierwsza</h2>To jest tekst <em>wyrózniony</em>.To jest tekst <strong>silnie wyrózniony</strong>.To jest <i>kursywa</i>.To jest tekst <b>pogrubiony</b>.<blockquote>To jest cytat.<p>Jest on zapisany w dwóch akapitach.</blockquote><h2>Czesc druga</h2><pre>t e k s tp r e f o r m a t o w a n y</pre><hr><!--pozioma linia--><address>Ostatnia modyfikacja:<br>04.10.1995, Jakub Niedzwiedz</address></body></html>Rysunek 3 przedstawia ten dokument wyswietlany przez przegladarke WWW. PołączeniaKazdy dokument w World Wide Web moze byc polaczony w strukture hipertekstowa z innymi dokument...
GallAnonim