51
Aplikacje internetowe Struktura dokumentu HTML

Aplikacje internetowe

  • Upload
    latoya

  • View
    32

  • Download
    0

Embed Size (px)

DESCRIPTION

Aplikacje internetowe. Struktura dokumentu HTML. Czym jest HTML?. - PowerPoint PPT Presentation

Citation preview

Page 1: Aplikacje internetowe

Aplikacje internetowe

Struktura dokumentu HTML

Page 2: Aplikacje internetowe

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. HyperText Markup Language, pol. hipertekstowy język znaczników).

Page 3: Aplikacje internetowe

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.

Page 4: Aplikacje internetowe

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.

Page 5: Aplikacje internetowe

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.

Page 6: Aplikacje internetowe

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.

Page 7: Aplikacje internetowe

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ą.

Page 8: Aplikacje internetowe

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.

Page 9: Aplikacje internetowe

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.

Page 10: Aplikacje internetowe

Struktura strony w HTML-u

<html><head></head><body>...treść Twojej strony...</body></html>

Page 11: Aplikacje internetowe

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>.

Page 12: Aplikacje internetowe

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.

Page 13: Aplikacje internetowe

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>.

Page 14: Aplikacje internetowe

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:

Page 15: Aplikacje internetowe

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

Page 16: Aplikacje internetowe

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.

Page 17: Aplikacje internetowe

Przykład

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

Page 18: Aplikacje internetowe

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.

Page 19: Aplikacje internetowe

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>

Page 20: Aplikacje internetowe

Wyniki w przeglądarceInternet Explorer

Page 21: Aplikacje internetowe

AkapityTeraz, 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.

Page 22: Aplikacje internetowe

Przykład

<p>Powoli i ostrożnie, Enigern zbliż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>

Page 23: Aplikacje internetowe

Listy

Najpowszechniej, oprócz nagłówków i akapitów, używanym elementem HTML-a są listy.W HTML-u zdefiniowane 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.

Page 24: Aplikacje internetowe

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.

Page 25: Aplikacje internetowe

Listy numerowaneListy 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.

Page 26: Aplikacje internetowe

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 zrestartujkomputer.</li><li>Módl się.</li></ol>

Page 27: Aplikacje internetowe

Efekt w przeglądarce internetowej

Page 28: Aplikacje internetowe

Formatowanie list numerowanych w HTML

Listy numerowane w HTML-u posiadają 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ąć.

Page 29: Aplikacje internetowe

Co to są atrybuty?

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

Page 30: Aplikacje internetowe

W HTML-u został 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.).

Page 31: Aplikacje internetowe

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".

Page 32: Aplikacje internetowe

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>

Page 33: Aplikacje internetowe

Efekt w przeglądarce

Page 34: Aplikacje internetowe

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.

Page 35: Aplikacje internetowe

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>

Page 36: Aplikacje internetowe

Efekt w przeglądarce

Page 37: Aplikacje internetowe

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.

Page 38: Aplikacje internetowe

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>

Page 39: Aplikacje internetowe

Efekt w przeglądarce

Page 40: Aplikacje internetowe

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.

Page 41: Aplikacje internetowe

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>

Page 42: Aplikacje internetowe

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>

Page 43: Aplikacje internetowe

Efekt w przeglądarce

Page 44: Aplikacje internetowe

Zadanie

Page 45: Aplikacje internetowe

<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>

Page 46: Aplikacje internetowe

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.

Page 47: Aplikacje internetowe

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>

Page 48: Aplikacje internetowe

Efekt w przeglądarce

Page 49: Aplikacje internetowe

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>.

Page 50: Aplikacje internetowe

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>

Page 51: Aplikacje internetowe

Efekt w przeglądarce