Projektowanie aplikacji internetowych - ćwiczenie nr 1 I

Transkrypt

1 ET stopień - semestr 1. CEL ĆWCZENA Celem ćwiczenia jest zapoznanie się ze składnią języka HTML i w oparciu o te wiadomości wykonanie prostej witryny internetowej składającej się z zestawu stron w języku HTML. Uwaga! Ćwiczenia (przykłady oraz zadania do samodzielnego wykonania) należy wykonać wykorzystując prosty edytor tekstowy (np. Notatnik) oraz dowolną przeglądarkę stron WWW (Firefox, Opera,...). Pliki tworzone podczas ćwiczeń należy zapisywać katalogu D://Projektowanie_aplikacji_internetowych/ Nazwisko_mie. 2. MATERAŁ NAUCZANA Wszystkie witryny internetowe są tworzone przy użyciu języków HTML i CSS. Przeglądarka WWW interpretuje kod HTML i CSS, tworząc na ich podstawie strony, które oglądamy. Niewielkie witryny czasami tworzy się, korzystając wyłącznie z kodu HTML i CSS. Jednak te większe, zwłaszcza te, których zawartość jest aktualizowana regularnie i które korzystają z systemów CMS, oprogramowania do prowadzania handlu elektronicznego często wymagają użycia bardziej złożonych technologii, choć są one w ostateczności stosowane do wygenerowania kodu HTML i CSS. Jeśli tworzona witryna używa tych technologii, mając wiedzę o językach HTML i CSS, możemy ją wykorzystać w celu zwiększenia kontroli nad wyglądem tworzonej strony. [1] 2.1. Język HTML Język HTML (ang. HyperText Markup Language) jest językiem wykorzystywanym do tworzenia dokumentów strony internetowej. Nie jest on językiem programowania. Należy do rodziny języków nazywanych językami znaczników (ang. markup language). Oznacza to, że jest systemem identyfikacji oraz opisu rożnych komponentów dokumentu, takich jak np. nagłówki, akapity czy listy. We wszystkich rodzajach dokumentów struktura jest istotnym czynnikiem ułatwiającym odbiorcy poruszanie się po ich zawartości. Podczas tworzenia stron WWW używamy struktury w analogiczny sposób jak w przypadku określania struktury dokumentu pisanego w edytorze tekstu MS Word, z tą różnicą jedynie, że aby opisać strukturę strony WWW, do słów stanowiących jej zawartość dodawane są specjalne elementy, tzw. znaczniki. W języku HTML znacznik (ang. tag) to napis otoczony znakami < oraz >. Bezpośrednio po znaku < występuje nazwa znacznika. (rys. 2.1). Znacznik otwierający i zamykający otaczają pewien fragment, nadając mu odpowiednie znaczenie. Lista znaczników w języku HTML jest ściśle określona. Język nie umożliwia dodawania nowych znaczników. Szczegółowy opis języka HTML5 znajduje się w specyfikacji, która dostępna jest pod adresem: Rys.2.1. Części elementu HTML [3] 2.2. Logiczna struktura tekstu - znaczniki strukturalne Znaczniki strukturalne opisują logiczną strukturę tekstu. Nie definiują sposobu wyświetlania elementu, jednak większość przeglądarek posiada wbudowane style, których używa, gdy do dokumentu nie jest dołączony żaden CSS.

2 ET stopień - semestr Przykład 2.1. Wprowadź tekst widoczny na rys. 2.2 używając Notatnika i zapisz go jako index.html. Obejrzyj plik w przeglądarce. Rys.2.2. Treść strony przykład 2.1 [1] Treść strony w przeglądarce nie prezentuje się zbyt ciekawie. Tekst napisany jest jednym ciągiem nie tak jak wyglądało to w oryginalnym dokumencie. Przeglądarka ignoruje złamanie wierszy w dokumencie źródłowym. Widać, że samo wpisanie treści strony i nazwanie dokumentu.html nie wystarczy. Z tego powodu niezbędny jest HTML. Znaczniki zostaną dodane w celu uzyskania struktury dokumentu najpierw w samym dokumencie HTML, a później do zawartości strony. Kiedy przeglądarka będzie znała strukturę treści, będzie w stanie wyświetlić stronę w bardziej znaczący sposób. Mając na uwadze strukturę dokumentu HTML strona WWW napisana w języku HTML5 składa się z trzech podstawowych części: definicji typu dokumentu (deklaracja <!DOCTYPE html>), nagłówka dokumentu (element <head>), treści dokumentu (element <body>). Zazwyczaj wewnątrz elementu <head> umieszczony jest element <title. Przeglądarka internetowa rozpoznaje kodowanie znaków strony WWW na podstawie elementu <meta>. Przykład 2.2. Uzupełnij tekst z przykładu 2.1 o znaczniki odpowiadające za strukturę samego dokumentu HTML Nadaj stronie tytuł To jest tytuł strony. Zastosuj kodowanie polskich znaków UTF-8. Obejrzyj plik w przeglądarce. <!DOCTYPE html> <head> <title> To jest tytuł strony </title> <meta charset="utf-8" /> </head> <body> To jest nagłówek pierwszego poziomu Ten tekst może stanowić wprowadzenie do dalszej części strony. Jeśli strona jest zbyt długa, to jej zawartość może zostać podzielona kilkoma nagłówkami niższego poziomu. To jest już nagłówek drugiego poziomu Wiele długich dokumentów zawiera nagłówki niższych poziomów (trzeciego, czwartego,...) by ułatwić czytelnikowi zrozumienie struktury dokumentu. A to kolejny nagłówek poziomu drugiego </body> </html>

3 ET stopień - semestr Przykład 2.3. Uzupełnij tekst o znaczniki odpowiadające za strukturę zawartości strony. Dodaj znaczniki identyfikujące nagłówki oraz podnagłówki <h1>i <h2> oraz akapity <p> rys 2.3. Obejrzyj plik w przeglądarce. <!DOCTYPE html> <head> <title> To jest tytuł strony </title> <meta charset="utf-8" /> </head> <body> <h1> To jest nagłówek pierwszego poziomu</h1> <p> Ten tekst może stanowić wprowadzenie do dalszej części strony. Jeśli strona jest zbyt długa, to jej zawartość może zostać podzielona kilkoma nagłówkami niższego poziomu.</p> <h2> To jest już nagłówek drugiego poziomu</h2> <p>wiele długich dokumentów zawiera nagłówki niższych poziomów (trzeciego, czwartego,...) by ułatwić czytelnikowi zrozumienie struktury dokumentu.</p> <h2>a to kolejny nagłówek poziomu drugiego</h2> </body> </html> 2.3. Znaczniki formatujące tekst Rys Oznaczenie tekstu za pomocą elementów HTML. nformuje przeglądarkę o początku dokumentu HTML Rozpoczyna sekcję nagłówka strony Określa tytuł strony Określa sposób kodowania strony Koniec sekcji nagłówka Początek treści strony nformuje, że To jest to nagłówek pierwszego poziomu Początek i koniec akapitu nformuje, że To jest już to nagłówek poziomu drugiego Koniec treści strony nformuje przeglądarkę, że w tym miejscu kończy się plik HTML Znaczniki formatujące mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Użycie tych znaczników gwarantuje, że w każdej sytuacji tekst otrzyma określone formatowanie (wygląd), ale nic nie mówi o charakterze tego tekstu. nnymi słowy: nie wiemy, czy tekst jest pogrubiony dlatego, że zawiera ważny termin, który powinien się wyróżniać, czy może dlatego, że autor strony chciał w tym miejscu po prostu wprowadzić czcionkę pogrubioną, bo akurat dobrze komponuje się z innymi elementami strony. [5] Jeśli umieścimy słowa pomiędzy znacznikami <b> i </b> będą one wyświetlone pogrubioną czcionką, natomiast jeżeli zastosujemy znaczniki <i> i </i> to tekst zawarty pomiędzy tymi znacznikami zostanie wyświetlony kursywą. Przykład 2.4. Uzupełnij dokument o nowy tekst oraz znaczniki. Obejrzyj plik w przeglądarce. <p>oto w jaki sposób słowo zostanie <b>pogrubione</b>.</p> <p>na stronie opisującej produkt niektóre jego <b>kluczowe cechy</b> mogą być pogrubione.</p> <p>oto sposób w jaki można wyświetlić słowo <i>kursywą</i>, a nawet <i><b>pogrubioną kursywą</b></i>.</p> W celu oznaczenia znaków, które mają być wyświetlone jako indeksy dolny używamy elementu <sub>, zaś w przypadku indeksów górnych <sup>. Przykład 2.5. Uzupełnij dokument o nowy tekst oraz znaczniki. Obejrzyj plik w przeglądarce. <p>wzór na pole kwadratu o boku <b>a</b> to <b>p = a<sup>2</sup></b>.</p> <p>wzór strukturalny dwutlenku węgla to <b>co<sub>2</sub></b>.</p> Przeglądarka internetowa ignoruje wszelkie znaki przejścia do następnej linii za pomocą klawisza Enter oraz postawienie obok siebie więcej niż jednej spacji. Jeśli chcemy zakończyć wiersz i wyświetlić

4 ET stopień - semestr dalszą część akapitu w nowym, możemy to zrobić używając znacznika <br />. Możemy również zastosować znacznik <hr /> - zagadnienia oddzielane są za pomocą dodania poziomej kreski. Elementy te należą do grypy tzw. elementów pustych składają się tylko z jednego znacznika (nie ma znacznika otwierającego i zamykającego). Natomiast w przypadku konieczności zastosowania w tekście więcej niż jednej spacji należy wykorzystać tzw. znaki specjalne. Symbol o nazwie: (czyli ) odpowiada dodatkowej niełamliwej spacji (odstępowi), zwanej również twardą spacją. Ponadto jeśli rozdzielimy dwa wyrazy symbolem dodatkowej spacji mamy pewność, że w tym miejscu nigdy nie zostanie przełamany wiersz (czyli nie zdarzy się tak, że pierwszy wyraz znajdzie się na końcu linii, a drugi na początku następnej). Przykład 2.6. Uzupełnij dokument o nowy tekst oraz znaczniki. Obejrzyj plik w przeglądarce. <p>ten tekst ma być w tej linijce<br /> ale tej już ma być w następnej </p> <p>ten tekst ma być w tej linijce<hr /> ale ten już ma być w następnej i dodatkowo oddzielony linią poziomą</p> <p>jeżeli użyjemy znaku twardej spacji mamy pewność, że spójnik nie znajdzie się na końcu linii. Przykład: czarny i biały.<br /> Oczywiście możemy zwiększyć odstęp pomiędzy znakami za pomocą tego znacznika. Przykład czarny i biały. <br />Jednak zadaniem tego znacznika nie jest wprowadzanie wcięć czy powiększonych odstępów w tekście. <br /> Znak ten pozwala poprawić estetykę typograficzną treści</p> 2.4. Znaczniki semantyczne Znaczniki semantyczne określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Elementów nie należy używać do modyfikacji wyglądu tekstu, służą one do bardziej precyzyjnego opisywania zawartości stron. Są stosowane dlatego, że inny programy, takie jak np. czytniki ekranowe lub wyszukiwarki, mogą korzystać z dostarczanych przez nie dodatkowych informacji, tak np. głoś generowany przez czytnik ekranowy może położyć większy nacisk na zawartość umieszczoną wewnątrz elementu <em>. wzmocnienie i nacisk: <strong> - zawartość znacznika ma większe znaczenie, <em> - oznacza dodatkowy nacisk, który nieznacznie zmienia znaczenie zdania; cytaty: <blockquote> - służy do tworzenia dłuższych cytatów prezentowanych jako osobne akapity tekstu, <q> - służy do oznaczania krótszych cytatów umieszczanych wewnątrz akapitów tekstu; skróty i akronimy: <abbr> - do określenia rozwinięcia skrótu służy atrybut title; cytaty i definicje: <cite> - stosuje się w celu odwołania się do jakiejś pracy, w celu określenia źródła prezentowanych informacji. <dfn> - w przypadku gdy w dokumencie po raz pierwszy wyjaśniamy znaczenie jakiegoś nowego terminu. Przykład 2.7. Uzupełnij dokument o nowy tekst oraz znaczniki [1]. Obejrzyj plik w przeglądarce. p <h1>opowiadanie</h1> <h2>rozdział pierwszy</h2> <p>marysia wyglądała przez okno przez prawie godzinę. Na biurku, pomiędzy magazynami <i>nature</i>, <i>new Scientist</i>, których wymagała jej praca, leżał egzemplarz <cite>w drodze</cite>. To była jej ulubiona lektura. <p>m dłużej przebywała w czterech ścianach czuła potrzebę odzyskania wolności. Spędziła w tym pokoju ostatnie dziesięć lat siedząc pod plakatem z cytatem z Oscara Wilde'a: <q>praca jest ucieczką dla osób, które nie mają niczego lepszego do roboty</q> Choć wielu uważało, że jej pionierskie prace nad odkryciem tajemnic <abbr title="deoxyribonuclecic acid">dna</abbr> to niezwykłe osiągnięcie, Marysia <em>wiedziała</em>, że ma coś ciekawszego do zrobienia.</p>

5 ET stopień - semestr 2.5. Listy W języku HTML5 występują trzy rodzaje list: lista nieuporządkowana (ang. unordered list) zbiory elementów, których kolejność nie jest istotna, są tworzone przy użyciu elementu <ul>, każdy element listy jest umieszczany pomiędzy znacznikami <li> </li> Przykład 2.8. Utwórz nową stronę WWW o nazwie Palenie kawy, zawierającą poniżej podaną listę nieuporządkowaną i zapisz pod nazwą palenie.html. Palenie kawy wywołuje znaczną liczbę zmian w ziarnach kawy. Są to między innymi: <ul> <li>zmiana koloru,</li> <li>powiększenie się ziaren nawet do 60%,</li> <li>zawartość wody spada z około 10% do 1%</li> <li>zawartość substancji tłuszczowych zwiększa się z 12% do 16%,</li> <li>uwydatniają się walory smakowo-zapachowe kawy,</li> <li>ziarna tracą nawet do 20% swojej masy w stosunku do masy zielonej kawy,</li> <li>palone ziarna są bardziej kruche niż zielone,</li> <li>palenie pozbawia ziaren ochronnej skórki.</li> </ul> lista uporządkowana (ang. ordered list) kolejność elementów ma znaczenie, są tworzone przy użyciu elementu <ol>, każdy element listy jest umieszczany pomiędzy znacznikami <li> </li> Przykład 2.9. Utwórz nową stronę WWW o nazwie Kawa po turecku, zawierającą poniżej podaną listę uporządkowaną i zapisz pod nazwą przepis.html. Kawa po turecku to najbardziej tradycyjny sposób serwowania kawy. Ukłon klasycznej sztuce oddasz przez serowanie naparu z miedzianego tygielka z długim uchwytem. Kolejno wykonaj następujące czynności: <ol> <li>napełnij tygielek co najmniej 2 pełnymi łyżeczkami mielonej kawy, cukrem (jedna łyżeczka cukru na każdą miarkę kawy)</li> <li> dopełnij wodą (nie dolewaj wody do samej krawędzi tygielka, ponieważ podgrzana kawa będzie kipiała)</li> <li> Mieszankę podgrzej i zdejmij z ognia od razu po zagotowaniu </li> <li> Czynność tę powtórz 3 razy - dopiero tak przyrządzona kawa nabierze pełnej mocy </li> <li> Dodaj odrobinę kardamonu i już możesz dać się uwieść niezwykłemu smakowi naparu</li> </ol> Jeżeli chcemy aby lista uporządkowana zaczynała się od numeru innego niż 1, możemy skorzystać z atrybutu start elementu <ol> w celu podania innego numeru początkowego: <ol start = 15 > lista definicji (ang. definition list) składa się z par nazwa wartość, co można zastosować np. do przedstawienia pojęć oraz ich definicji, są tworzone przy użyciu elementu <dl>, wewnątrz elementu <dl> zazwyczaj umieszczane są pary <dt> i <dd>

6 ET stopień - semestr Przykład Utwórz nową stronę WWW o nazwie Rodzaje kaw, zawierającą poniżej podaną listę definicji i zapisz pod nazwą rodzaje.html. Rodzaje kaw w kawiarniach: <dl> <dt> Espresso </dt> <dd> czarna mocna kawa z ekspresu ciśnieniowego uzyskiwana z kilku odmian kawy arabica z dodatkiem kawy robusty, podawana w filiżance o pojemności ok. 50ml;</dd> <dt> Espresso dopio </dt> <dd> podwójne espresso; </dd> <dt> Caffe latte </dt> <dd> napar kawowy z dodatkiem ciepłego zaparzonego i spienionego mleka (proporcja pół na pół), całość posypana kakao lub cynamonem; </dd> <dt> Americano </dt> <dd> jest kawą z ekspresu, która w smaku przypomina kawę filtrowaną, dolewana jest do filiżanki gorąca woda, aby rozcieńczyć napar, zachowując jednocześnie specyficzny smak;</dd> </dl> 2.6. Łącza (odsyłacze) Powszechnie spotyka się następujące rodzaje łączy: Łącza pomiędzy odrębnymi witrynami, Łącza pomiędzy różnymi stronami należącymi do tej samej witryny, Łącza wyświetlające nowe okna przeglądarki, Łącza, które pozwalają uruchomić klienta poczty elektronicznej i utworzyć nową wiadomość do podanej osoby. Do tworzenia odsyłaczy służy element <a> (ang. anchor kotwica). Aby jakiś tekst stał się odsyłaczem, wystarczy go umieścić między znacznikiem otwierającym, a zamykającym <a> </a> oraz dodać atrybut href, którego wartością jest adres URL strony, do której odsyłacz ma prowadzić: bezwzględny adres URL zawiera pełny adres dokumentu wraz z protokołem ( nazwą domeny oraz właściwą nazwą ścieżki. Tego typu adresów należy używać, gdy wskazuje się dokumenty umieszczone na serwerze zewnętrznym. względny adres URL opisuje ścieżkę do pliku względem bieżącego dokumentu. Nie wymaga podawania nazwy protokołu ani domeny wystarczy sama ścieżka. Względne adresy URL mogą być wykorzystywane wtedy, gdy tworzy się odsyłacze do dokumentu znajdującego się na naszej własnej stronie (tzn. na naszym serwerze). Przykład Utwórz nową stronę WWW o nazwie Łącza i zapisz pod nazwą hiperlacza.html. <h2> Łącze do odrębnej witryny </h2> <p>to jest łącze do odrębnej witryny <a href=" HTML</a> <br /> Podaliśmy bezwzględny adres URL </p> <h2> Łącze do innej strony należącej do tej samej witryny </h2> <p> To jest łącze do innej strony tej samej witryny <a href="index.html">pierwsza strona</a> <br /> Podaliśmy względny adres URL </p> <p> Jeżeli pliki nie znajdują się w tym samym katalogu należy podać przeglądarce lokalizację poprzez dodanie do adresu URL ścieżki do pliku</p> <h2> Łącze wyświetlające nowe okno przeglądarki</h2> <p>to jest łącze, które wyświetli stronę docelową w nowym oknie przeglądarki <a href="index.html" target="blank">pierwsza strona</a></p> <h2> Łącze z adresem poczty elektronicznej</h2> <p>to jest łącze, które spowoduje otwarcie programu do obsługi poczty elektronicznej <a href="mailto:autor@pierwsza_strona.pl" >Wyślij mail do Autora strony</a></p>

7 ET stopień - semestr 3. LTERATURA 1. Duckett J., HTML i CSS. Zaprojektuj i zbuduj witrynę Helion, Gliwice, Gajda W., HTML5 i CSS3. Praktyczne projekty, Helion, Gliwice, Freeman E., Freeman E., Head First HTML with CSS & XHTML, Helion, Gliwice, Robbins J., Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wydanie V, Helion, Gliwice,