Struktura witryny internetowej – język HTML. 1. CEL

Transkrypt

Projektowanie aplikacji internetowych - ćwiczenie nr 1
ETI II stopień - semestr
I
Struktura witryny internetowej – język HTML.
1. CEL ĆWICZENIA
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_Imie.
2. MATERIAŁ NAUCZANIA
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:
http://dev.w3.org/html5/spec/.
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.
I
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>
I
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>
Informuje 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
Informuje, że „To jest…” to
nagłówek pierwszego poziomu
<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>
Początek i koniec akapitu
<h2> To jest już nagłówek drugiego poziomu</h2>
Informuje, że „To jest już …” to
nagłówek poziomu drugiego
<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>
Koniec treści strony
Informuje przeglądarkę, że w tym
miejscu kończy się plik HTML
Rys. 2.3. Oznaczenie tekstu za pomocą elementów HTML.
2.3. Znaczniki formatujące tekst
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.
Innymi 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>.
<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ć
I
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).
<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, I 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>Im 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>
I
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>
I
Przykład 2.10. 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 (http://), 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 2.11. 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="http://www.kurshtml.edu.pl/">kurs
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>
I
3. LITERATURA
1.
2.
3.
4.
Duckett J., HTML i CSS. Zaprojektuj i zbuduj witrynę www., Helion, Gliwice, 2014
Gajda W., HTML5 i CSS3. Praktyczne projekty, Helion, Gliwice, 2013
Freeman E., Freeman E., Head First HTML with CSS & XHTML, Helion, Gliwice, 2007
Robbins J., Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po
HTML5, CSS3 i grafice. Wydanie IV, Helion, Gliwice, 2013
5. http://www.kurshtml.edu.pl/

Struktura witryny internetowej – język HTML. 1. CEL

Transkrypt

Podobne dokumenty

Cennik za jedno słowo kluczowe bądź frazę

pobierz pdf.

Podstawowy konspekt dotyczący wykonania witryny WWW

Temat szkolenia: Tworzenie stron internetowych

Tematyka i rozwiązania metodyczne kolejnych

semestr III

Polityka Ochrony Prywatności