Aplikacje internetowe

Aplikacje internetowe Struktura dokumentu HTML

Czym jest HTML? Aby umieścić w Internecie jakąś treść dostępną dla wszystkich w postaci strony internetowej, musimy znać odpowiedni język, który będzie zrozumiały dla człowieka i maszyny. W dodatku język ten musi być uniwersalny i musi posiadać ścisłe reguły, by komputery wszystkich użytkowników mogły go odczytać. Tym językiem jest właśnie HTML (ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników).

Do czego służy HTML? HTML daje autorowi między innymi możliwość: • publikacji dokumentów w których zawarte są między innymi: tekst, tabele, obrazy, listy itp. • wczytywania informacji za pośrednictwem hipertekstowych łączy zawartych w formie przycisku. • konstruowania różnego rodzaju formularzy, np. wyszukiwarki, rezerwacji itp. • umieszczania multimediów, np. klipów wideo, muzyki.

Jak wygląda plik HTML Strony, stworzone w HTML-u to zwykłe pliki tekstowe, co oznacza, że nie zawierają one żadnych informacji właściwych dla konkretnej platformy systemowej czy programowej. Mogą być odczytywane praktycznie przez każdy edytor tekstów (co w praktyce oznacza, że mogą je odczytywać wszystkie edytory tekstów.

Plik HTML zawiera następujące elementy: • właściwy tekst strony, • znaczniki HTML, określające elementy strony, jej strukturę, sposoby formatowania i hiperpołączenia do innych stron lub informacji innego rodzaju. Większość znaczników ma następującą postać: <NazwaZnacznika>tekst</NazwaZnacznika> Nazwa znacznika (tu NazwaZnacznika) ujęta jest w nawiasy kątowe.

Każdy znacznik składa się zasadniczo z dwóch części: znacznika otwierającego i zamykającego, pomiędzy którymi zawarty jest tekst, którego dotyczą. Znacznik otwierający „włącza” pewien sposób formatowania (nagłówek, pogrubienie itp.), a zamykający go „wyłącza”. Nie wszystkie znaczniki HTML mają swój początek i koniec. Niektóre z nich są pojedyncze, inne z kolei są swego rodzaju „pojemnikami”, które zawierają pomiędzy nawiasami dodatkowe informacje.

Zapis pliku HTML Po utworzeniu pliku HTML zachowujemy go na dysku w formacie tekstowym. Wybierając nazwę pliku, zastosuj się do poniższych reguł: • plik powinien posiadać rozszerzenie .html (.htm w systemie DOS lub Windows 3.x), na przykład, mojplik.html, tekst.html lub index.htm. Większość oprogramowania wykorzystywanego do pracy w sieci WWW wymaga tego rozszerzenia, tak więc dobrze jest od razu wyrobić sobie nawyk używania go; • nazwy powinny być krótkie i proste. Nie używamy spacji i znaków specjalnych, cyfry i litery w zupełności wystarczą.

Struktura HTML-a W HTML-u zdefiniowane są trzy znaczniki, które opisują ogólną strukturę strony oraz dostarczają podstawowych informacji nagłówkowych. Znaczniki te, <html>, <head> oraz <body>, identyfikują stronę WWW w przeglądarkach lub w innych narzędziach HTML. Mogą także zawierać najistotniejsze informacje o stronie, na przykład tytuł lub nazwisko autora. Znaczniki, opisujące strukturę strony, nie mają wpływu na jej wygląd w przeglądarce, istnieją tylko po to, aby pomóc przeglądarkom w przetwarzaniu plików HTML.

Zgodnie ze ścisłą definicją HTML-a, znaczniki te są opcjonalne, znaczy to, że ich brak nie uniemożliwia odczytania strony przez przeglądarkę. Znaczniki te są jednak wymagane w XHTML-u, więc powinniśmy wyrobić sobie nawyk stosowania znaczników określających strukturę strony.

Struktura strony w HTML-u <html> <head> </head> <body> ...treść Twojej strony... </body> </html>

Znacznik <html> Pierwszym znacznikiem struktury, znajdującym się na każdej stronie jest <html>. Mówi on o tym, że zawartość odczytywanego właśnie pliku to kod, napisany w HTML-u. Cała zawartość pliku, czyli treść i pozostałe znaczniki powinny znajdować się pomiędzy początkowym i końcowym znacznikiem <html>.

Znacznik <head> Para znaczników <head> … </head> wyznacza nagłówek strony. W obrębie nagłówka znajduje się tylko kilka innych znaczników (najczęściej tytuł strony,). W żadnym wypadku nie należy umieszczać w tym miejscu treści strony.

Znacznik <body> Pozostała część strony (w powyższym przykładzie przedstawiona jako „.... treść Twojej strony....”), znajduje się pomiędzy początkowym i końcowym znacznikiem <body>.

Zagnieżdżanie znaczników W powyższym przykładzie widać wyraźnie, że znaczniki HTML są w sobie nawzajem zagnieżdżone. Obydwa znaczniki <body> i </body> znajdują się pomiędzy początkowym i końcowym znacznikiem <html>, podobnie sprawa ma się w przypadku znaczników <head>. Wszystkie znaczniki HTML-a działają właśnie w ten sposób — formatują zagnieżdżone fragmenty tekstu. Musimy bardzo uważać, aby nie mylić kolejności znaczników, jak w poniższym, błędnym przykładzie:

Przykład błędnego zagnieżdżania znaczników <html> <head> <body> </head> </body> </html> Za każdym razem, kiedy zamykamy znacznik, musimy upewnić się, że zamykamy ostatni, który został otwarty

Tytuł • Każda strona, napisana w HTML-u powinna posiadać tytuł. Z tego tytułu korzystają później przeglądarki i programy katalogujące strony WWW, umieszczając je na tworzonych przez siebie listach ulubionych stron. Do nadawania tytułu służy znacznik <title>. • Znacznik <title> znajduje się zawsze w obrębie nagłówka strony (znaczniki <head>) i jego zadaniem jest skrótowe opisanie jej treści. • Strona może posiadać tylko jeden tytuł, który z kolei może zawierać tylko tekst, żadne inne znaczniki nie są dozwolone.

Przykład <html> <head> <title>Lew, Wiedźma i Garderoba</title> </head> <body> .... treść Twojej strony .... </body> </html>

Nagłówki Nagłówki służą do podziału tekstu na części, tak jak książka dzielona jest na rozdziały. W HTML-u zdefiniowanych jest sześć poziomów nagłówków. Znacznik nagłówka wygląda następująco: <h1>Zakładanie zamka</h1> Liczby określają poziom nagłówka (od h1 do h6). Nagłówki nie są numerowane podczas wyświetlania. Różnią się między sobą wielkością i atrybutami czcionki (pogrubienie, podkreślenie, wielkie litery) i w ten sposób odróżniają się od reszty tekstu.

Przykład <html> <head> <title>Nagłówki</title> </head> <body> <h1>Mitologia na przestrzeni dziejów</h1> <h2>Powszechne tematy mitologiczne</h2> <h2>Najwcześniej znane mity</h2> <h2>Źródła mitologii</h2> <h3>Mitologia Mezopotamska</h3> <h3>Mitologia Egipska</h3> <h4>Opowieść o Izys i Ozyrysie</h4> <h4>Horus i Set: Bitwa między Dobrem a Złem</h4> <h4>Dwanaście godzin Świata Zmarłych</h4> <h4>Rzeka Styks</h4> <h2>Historia w mitach</h2> </body> </html>

Wyniki w przeglądarceInternet Explorer

Akapity Teraz, kiedy strona posiada już tytuł i nagłówki, można dopisać do niej trochę treści w postaci zwykłych akapitów. Akapit jest to część tekstu objęta znacznikami: <p>...</p>. Następujące bezpośrednio po sobie akapity są oddzielone przerwą w tekście (pustą linią). Dzięki umieszczaniu w kolejnych akapitach treści nieco różniącej się tematycznie, strona stanie się bardziej estetyczna oraz czytelniejsza.

Przykład <p>Powoli i ostrożnie, Enigernzbliżył się do potężnego smoka. Szelest pośród drzew pobliskiego lasu oderwał na chwilę jego uwagę, śmiertelny błąd dzielnego rycerza.</p> <p>Smok rzucił się na niego, zionąc nagłym tchnieniem ognistego oddechu. Kiedy smok wzniósł się ponad nim, Enigern padł na ziemię. Szybko wyciągnął miecz i pchnął nim w pierś smoka.</p>

Listy Najpowszechniej, oprócz nagłówków i akapitów, używanym elementem HTML-a są listy. W HTML-uzdefiniowane są trzy typy list: • listy numerowane, oznaczane kolejnymi liczbami, • listy wypunktowane, oznaczone kropkami lub innymi symbolami, • listy definicji, gdzie każdy element składa się z pojęcia oraz definicji, a pojęcie jest w jakiś sposób wyróżnione.

Znaczniki list Wszystkie znaczniki list posiadają następujące, wspólne elementy: • cała lista jest objęta przez znaczniki początkowe i końcowe, odpowiednie dla danego rodzaju listy (na przykład <ul> i </ul>, <ol> i </ol>), • każdy element listy posiada swój własny znacznik: <dt> i <dd> dla listy pojęć oraz <li> dla pozostałych list.

Listy numerowane Listy numerowane są objęte znacznikami <ol>…</ol> (ol oznacza skrót od ang. Ordered List, lista uporządkowana), a każdy element listy rozpoczyna się od znacznika <li> (ang. List Item, element listy). Przeglądarka, wyświetlając elementy listy, numeruje je kolejno i wyświetla z odpowiednimi wcięciami. Nie musimy robić nic, co związane byłoby z nadawaniem numerów; całą pracę wykonuje przeglądarka. Jeżeli dodamy lub usuniemy jakiś element, przy następnym odczycie strony numeracja zostanie zaktualizowana.

Przykład <p>Instalacja nowego systemu operacyjnego</p> <ol> <li>WłóżCD-ROM do stacji.</li> <li>Wybierz URUCHOM.</li> <li>Wprowadź literę stacji CD-ROM (przykładowo: D:\), i SETUP.EXE.</li> <li>Instaluj według kolejnych kroków programu instalacyjnego.</li> <li>Po zainstalowaniu wszystkich plików zrestartuj komputer.</li> <li>Módl się.</li> </ol>

Efekt w przeglądarce internetowej

Formatowanie list numerowanych w HTML Listy numerowane w HTML-uposiadają kilka atrybutów, za pomocą których możemy sterować sposobem wyświetlania listy przez przeglądarkę. Atrybuty te pozwalają, między innymi na wybór schematu numerowania, który zostanie wykorzystany do nadawania kolejnych numerów, pozwala też na określenie liczby, od której numeracja ma się rozpocząć.

Co to są atrybuty? Atrybuty to specjalne elementy znaczników, które zawierają dodatkowe opcje lub informacje o znacznikach.

W HTML-uzostał zdefiniowany atrybut type, który umożliwia wybór jednego z pięciu możliwych schematów numerowania: • "1": standardowa numeracja za pomocą liczebników arabskich (1, 2, 3 itd.), • "a": numeracja za pomocą kolejnych, małych liter alfabetu (a, b, c itd.), • "A": numeracja za pomocą kolejnych, wielkich liter alfabetu (A, B, C itd.), • "i": numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych małymi literami (i, ii, iii itd.), • "I": numeracja za pomocą kolejnych liczb alfabetu rzymskiego, zapisanych wielkimi literami (I, II, III itd.).

Schemat numeracji zapisuje się wewnątrz znacznika <ol> w następujący sposób: <ol type= "a">. W sytuacji, gdy atrybut type nie zostanie określony, przyjmowana jest standardowa wartość "1".

Przykład <p>Dni tygodnia w języku francuskim:</p> <ol type="I"> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol>

Efekt w przeglądarce

Atrybut start Inny atrybut, start, pozwala na określenie, od jakiej liczby lub litery należy rozpocząć numerację. Standardowo przyjmowaną liczbą jest oczywiście 1, ale start pozwala na zmianę tej wartości. Tak więc <ol start="4"> spowoduje rozpoczęcie numeracji listy od liczby 4, natomiast <ol type="a" start="3"> sprawi, że pierwszą literą listy numerowanej alfabetycznie będzie „c”, po niej nastąpi „d” itd.

Przykład • <ol type="I" start="7"> • <li>Lipiec</li> • <li>Sierpień</li> • <li>Wrzesień</li> • <li>Październik</li> • <li>Listopad</li> • <li>Grudzień</li> • </ol>

Listy wypunktowane W listach wypunktowanych kolejność występowania elementów nie ma najmniejszego znaczenia. Z punktu widzenia HTML-a lista wypunktowana wygląda prawie tak samo jak lista numerowana, z tym, że ta pierwsza zawarta jest pomiędzy znacznikami <ul>-</ul>, a nie <ol>. Elementy listy oznaczone są znacznikiem <li>, dokładnie tak jak w listach numerowanych.

Przykład <p>Oto co lubię robić każdego ranka:</p> <ul> <li>Wypićfiliżankę kawy</li> <li>Oglądać wschód słońca</li> <li>Słuchać śpiewu ptaszków</li> <li>Słuchać szmeru liści pobliskich drzew</li> <li>Przeklinać odgłosy pobliskiej budowy burzące pogodny nastrój</li> </ul>

Formatowanie list wypunktowanych w HTML-u Postać list wypunktowanych, podobnie jak numerowanych, można modyfikować przy wykorzystaniu atrybutów HTML. Atrybut type może przyjmować trzy następujące wartości: • "disc": kółko lub kropka, jest to wartość przyjmowana standardowo, • "square": mały kwadrat, • "circle": większość przeglądarek wyświetla ”disc” jako wypełnione kółko, ale w tym wypadku powinno pojawić się puste.

Przykład <ul type="disc"> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Kasety magnetofonowe</li> </ul> <ul type="square"> <li>DAT - Digital Audio Tapes</li> <li>CD - Compact Discs</li> <li>Kasety magnetofonowe</li> </ul> <ul type="circle"> <li>DAT - Digital Audio Tapes</li> <li>CD – Compact Discs</li> <li>Kasety magnetofonowe</li> </ul>

Zadanie

<html> <head> <title>Profil Spółki, Camembert Sp. z o.o.</title> </head> <body> <h1>Camembert Sp. z o.o.</h1> <p>"Całymi nocami śniłem o serze -- najczęściej o tostach z serem. " -- Robert Louis Stevenson</p> <h2>Co robimy</h2> <p>Produkujemy ser. Mnóstwo sera; ponad osiem ton rocznie.</p> <h2>Dlaczego?</h2> <p>Ludzie, którzy lubią ser płacą nam mnóstwo forsy. Więc produkujemy więcej.</p> <h2>Nasze ulubione sery</h2> <ul> <li>Brie</li> <li>Havarti</li> <li>Camembert</li> <li>Mozzarella</li> </ul> </body> </html>

Listy zagnieżdżone Co stanie się, gdy wstawimy jedną listę wewnątrz drugiej? Zagnieżdżanie list w HTML-u działa bardzo sprawnie — wystarczy wstawić całą listę jako element innej. Lista zagnieżdżona w ten sposób staje się elementem listy macierzystej i jest wyświetlana z odpowiednim wcięciem. Jest to szczególnie dobry sposób na odzwierciedlenie struktur hierarchicznych, takich jak wszelkiego rodzaju spisy treści.

Przykład <h1>Rodzaje linii rysunkowych</h1> <ul> <li>Gruba</li> <li>Cienka</li> <ul> <li>Ciągła</li> <li>Kreskowa</li> <li>Punktowa</li> <li>Dwupunktowa</li> <li>Falista</li> </ul> <li>Bardzo gruba</li> </ul>

Listy definicji Listy definicji różnią się nieznacznie od pozostałych. Każdy element listy składa się bowiem z dwóch, a nie jednej części: • pojęcia, • definicji. Każda część elementu listy definicji posiada swój znacznik: <dt> oznacza pojęcie (skrót od ang. definition term), a <dd> definicję Obydwa te znaczniki są pojedyncze i występują zazwyczaj parami, chociaż większość przeglądarek radzi sobie bez problemów z samym pojęciem czy też samą definicją. Cała lista definicji objęta jest znacznikami <dl>…</dl>.

Przykład <dl> <dt>Bazylia</dt> <dd>Roślina jednoroczna. Osiąga wysokość czterech stóp, jej drobne białe kwiatki pachną bosko.</dd> <dt>Oregano</dt> <dd>Roślina wieloletnia. Wypuszcza dużo podziemnych pędów i trudno ją przesadzić w inne miejsce.</dd> <dt>Kolendra</dt> <dd>Roślina jednoroczna. Lubi łagodną aurę wiosny i jesieni.</dd> </dl>

Aplikacje internetowe