Microsoft Word - technologie_internetowe_cw_01

Tworzenie stron internetowych w oparciu o język HTML

Język HTML - Wstęp

Język HTML jest bez wątpienia najpopularniejszym językiem tworzenia stron

internetowych. Pierwsza specyfikacja języka powstała w 1991 roku. HTML jest językiem

opisującym dokument za pomocą szeregu znaczników, stąd jego nazwa - z języka

angielskiego HyperText Markup Language (hipertekstowy język znaczników). Język

definiuje dokument za pomocą odpowiednich bloków (blok nagłówka, blok treści

dokumentu), które reprezentowane są przez odpowiednie znaczniki. Strony internetowe

napisane w języku HTML są interpretowane po stronie klienta przez przeglądarki

internetowe. Oznacza to, że strona napisana w języku HTML przechowywana jest w pliku

tekstowym (z rozszerzeniem .html lub .htm) na serwerze WWW (serwerze stron

internetowych) pod określonym adresem internetowym (tzw. adresem URL). W momencie,

gdy klient (osoba odwiedzająca stronę) wywołuje dany adres internetowy za pomocą

przeglądarki internetowej, przeglądarka pobiera do pamięci podręcznej (tzw. cache)

dokument HTML, odczytuje plik interpretując jego zawartość, a następnie wyświetla swoją

interpretację dokumentu HTML na ekranie komputera. Często zauważyć można niewielkie

różnice w tym, jak różne przeglądarki internetowe interpretują i wyświetlają zawartość danej

strony internetowej.

Znaczniki HTML

Dokument HTML składa się z szeregu znaczników. Znaczniki definiują sekcje

dokumentu takie jak nagłówki, akapity, listy czy tabele. Znacznik jest przedstawiony jako

tekst będący nazwą znacznika pomiędzy symbolami nawiasów ostrych:

<nazwa_znacznika>

Wyróżnić można dwa rodzaje znaczników:

• Znaczniki wymagające zamknięcia sekcji – znacznik zamykający sekcję wygląda tak

samo jak znacznik otwierający, poprzedzony jest jednak symbolem „/” oraz nie

posiada parametrów:

Tworzenie stron internetowych w oparciu o język HTML

• Znaczniki samodzielne – znaczniki występujące samodzielnie bez konieczności

zamknięcia, które po nazwie znacznika mają symbol „/”

Dodatkowo znaczniki mogą posiadać parametry, które posiadają następującą strukturę:

Nazwa_parametru=”wartość_parametru”

Parametry znaczników występują po nazwie znacznika, i mogą pojawiać się tylko w

znacznikach otwierających sekcję (w przypadku znaczników wymagających zamknięcia) oraz

w znacznikach nie wymagających zamknięcia. Przykładowy znacznik z dwoma parametrami

powinien zostać zapisany w następujący sposób:

lub np. :

Znacznikiem odbiegającym od powyższych zasad jest znacznik komentarza, który pozwala

programującemu umieścić w dokumencie dowolny komentarz tekstowy, który nie zostanie

wyświetlony przez przeglądarkę np:

<!—- dowolny tekst komentarza -->

Nawet, gdy w jego wnętrzu jest inny znacznik HTML, co jest bardzo wygodnym zabiegiem,

gdy programujący chce w szybki sposób wykluczyć ze strony część gotowego już kodu np.:

<!—- <znacznik> tekst </znacznik> -->

Struktura dokumentu

Dokument HTML składa się z sekcji. Pierwszym znacznikiem dokumentu powinien być

zawsze znacznik definicji typu dokumentu, który informuje przeglądarkę w którym

standardzie napisana jest dana strona internetowa.

Tworzenie stron internetowych w oparciu o język HTML

Przykład definicji typu dokumentu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Znacznik definicji typu dokumentu odbiega składnią od wyżej opisanych znaczników,

ponieważ nie jest znacznikiem zamykanym, ale nie ma też symbolu „/” typowego dla

samodzielnych znaczników. Zawarte w nim informacje informują przeglądarkę w której

wersji języka zapisana jest strona oraz wskazują adres definicji danej wersji standardu

(w3.org to organizacja normująca standardy języka HTML). Powyższy wpis informuje, iż

strona napisana jest w standardzie HTML 4.01, opcja transitional informuje iż składnia języka

jest „przejściowa” i może zawierać elementy niezalecane dla danej wersji, jednak wersja ta

jest bardziej zalecana dla początkujących programistów, ponieważ w przeciwieństwie to

wersji strict (ścisłej) jest mniej restrykcyjna i zastosowanie znacznika, który np. w danej

wersji specyfikacji nie występuje, sprawi iż przeglądarka i tak wyświetli go poprawnie.

Po znaczniku definicji typu dokumenty występuje pierwsza główna sekcja dokumentu HTML,

którą reprezentuje znacznik:

Wszystkie inne sekcje dokumentu znajdują się pomiędzy tymi znacznikami. Kolejną sekcją, w

której znajdują się techniczne informacje o stronie jest sekcja nagłówkowa:

W sekcji nagłówkowej znajdują się meta znaczniki i tytuł strony. Mogą tutaj znajdować się

także definicje funkcji JavaScript lub definicje stylu. Tytuł strony znajduje się pomiędzy

znacznikiem zamykanym:

Po sekcji nagłówkowej znajduje się sekcja treści dokumentu :

Schematyczną strukturę dokumentu prezentuje Rysunek 1.

Tworzenie stron internetowych w oparciu o język HTML

HTML

HEAD

BODY

META

TITLE

...

ODNOŚNIKI

RAMKI

MULTIMEDIA

TEKST

OBRAZY

TABELE

Ćwiczenie 1. Pierwsza strona internetowa

Na podstawie wstępu teoretycznego oraz kierując się schematem na rysunku 1 stworzyć

stronę internetową za pomocą notatnika systemowego. Strona powinna mieć tylko

poprawnie zachowaną strukturę dokumentu, tytuł oraz kilka linijek dowolnego tekstu w

treści strony. Stronę zapisać jako plik na pulpicie o nazwie index.html. Otworzyć plik w

dwóch różnych przeglądarkach internetowych.

Gdzie znajduje się tytuł strony ? Czy znak ‘enter’ wywołuje przejście do nowej linii ?

Formatowanie tekstu

Tekst formatowany jest za pomocą odpowiednich znaczników oraz ich parametrów.

•

- tekst pomniejszony

•

- tekst powiększony

Rysunek 1 Schemat struktury dokumenty HTML

Tworzenie stron internetowych w oparciu o język HTML

•

- kursywa

•

- tekst pogrubiony

•

- tekst wzmocniony

•

- indeks górny

•

- indeks dolny

•

- tytuł nagłówkowy stopnia pierwszego ( i odpowiednio do h6)

•

<br />

- znacznik łamania linii (przejście do nowej linii)

Ważnym znacznikiem formatowania tekstu jest znacznik

. Znacznik działa

jednak tylko z parametrami odpowiedzialnymi za:

•

size=”1-7”

– rozmiar czcionki

•

color=”#rgb(hex) lub angielska nazwa koloru”

– kolor czcionki

•

face=”nazwa czcionki”

– nazwa czcionki, można wymienić kilka nazw czcionek

oddzielonych przecinkami, ponieważ nigdy nie ma pewności, że osoba oglądająca

stronę ma zainstalowaną definiowaną przez nas czcionkę.

Ćwiczenie 2. Odtworzyć sformatowany tekst

Przetestować przedstawione powyżej znaczniki formatowania tekstu. Odtworzyć poniższy

wydruk strony (podpowiedzi znajdują się na zielonym tle):

Przykładowy

niebieski

tekst

rozmiarze

pisany

czcionką

Tahoma.

Przykładowy czerwony tekst o rozmiarze 6

pisany czcionką Times New Roman.

Tworzenie stron internetowych w oparciu o język HTML

Średnia arytmetyczna

Definicja

Średnią arytmetyczną n wartości pomiarowych nazywamy wynik ilorazu sumy wszystkich

wartości pomiarowych (

+ x

+ … + x

) przez ilości wszystkich składników pomiarowych (

Wzór

Wzór reprezentujący średnią arytmetyczną:

R =

+ x

+ … + x

) / n

Gdzie: x

1-n

- kolejne wartości pomiarów, n - liczba wszystkich pomiarów

Akapity, bloki i listy

Tekst organizowany jest za pomocą bloków i list. Blok akapitu reprezentuje znacznik:

lub znacznik:

Znaczniki akapitu mogą zostać opatrzone parametrem align, który odpowiada za poziome

wyrównanie tekstu w danym akapicie np.

Powyższy przykład wyrównuje tekst w danym akapicie do strony prawej. Inne wartości

parametru align mogą przyjąć wartości: left (do lewej), center (do środka), justify

(justowanie).

Nagłówek h1

Kursywa i pogrubienie

Indeks dolny

Kursywa i

indeks dolny

Nagłówek h2

Kursywa, pogrubienie, wzmocnienie

z kursywą, indeksy dolne. Tekst w

nawiasach to tekst pomniejszony.

Tworzenie stron internetowych w oparciu o język HTML

Innym przykładem organizowania tekstu są wypunktowania i listy numerowane. Listę

otwiera znaczniki

<ul>

(w przypadku wypunktowań, natomiast w przypadku list

numerowanych jest to znacznik

<ol>

). Elementy listy oznaczane są znacznikiem

<li> …

</li>.

Np.:

<ul>

<li> Punkt pierwszy </li>

<li> Punkt drugi </li>

</ul>

Uwaga! Jeśli w treści elementu listy (

) umieścimy kolejną listę uzyskamy listę

zagnieżdżoną (patrz przykład - ćwiczenie 3).

Ćwiczenie 3. Odtworzyć bloki i listy

Przetestować przedstawione powyżej znaczniki bloków i list. Odtworzyć poniższy wydruk

strony .

Wyjustowany akapit tekstu. Wyjustowany akapit tekstu. Wyjustowany akapit tekstu. Wyjustowany akapit

tekstu. Wyjustowany akapit tekstu. Wyjustowany akapit tekstu. Wyjustowany akapit tekstu. Wyjustowany

akapit tekstu.

Akapit tekstu wyrównany do strony prawej.

Akapit tekstu wyrównany do środka.

1. Punkt pierwszy

1. Podpunkt pierwszy

2. Podpunkt drugi

• PP pierwszy

• PP drugi

• PP trzeci

3. Podpunkt trzeci

2. Punkt drugi
3. Punkt trzeci

• Podpunkt pierwszy
• Podpunkt drugi

1. PP pierwszy

2. PP drugi

• Podpunkt trzeci

4. Punkt czwarty
5. Punkt piąty

Tworzenie stron internetowych w oparciu o język HTML

Grafika

Grafiki i zdjęcia są podstawowym elementem stron internetowych. Aby umieścić grafikę na

stronie zastosować należy znacznik

<img />

z odpowiednimi parametrami. Parametry

znacznika:

•

src=”ścieŜka”

– parametr wskazujący ścieżkę względną do miejsca na dysku, gdzie

znajduje się plik z grafiką

•

width=”wartość px”

– parametr określający szerokość grafiki.

•

height=” wartość px”

– parametr określający wyskokość grafiki.

•

alt=”tekst”

– parametr określający tekst alternatywny, który zostanie wyświetlony, gdy z

jakiegoś powodu grafika nie zostanie wyświetlona na stronie

•

align=”left lub right”

– parametr określa z której strony obrazek ma być opisany

tekstem

•

border=”wartość px”

- parametr określa grubość obramowania obrazka (szczególnie

przydatne, gdzy obrazek ma być łączem internetowym)

Pamiętać należy, iż ustalając niepoprawnie wartości szerokości i wysokości rysunku uzyskać

można niepożądany efekt nieproporcjonalnego rozciągnięcia zdjęcia.

Ćwiczenie 4. Odtworzyć układ grafiki na stronie

Do wykonania tego ćwiczenia należy pobrać z Internetu dowolne zdjęcie o średnich

rozmiarach, a następnie odtworzyć poniższy wydruk strony .

Tworzenie stron internetowych w oparciu o język HTML

Tabele

Tabele (

) składają się z wierszy (

), a wiersze z komórek (

<td>

… </td>

). Treść tabeli może znajdować się tylko w komórkach.

Najważniejsze parametry znacznika tabeli

<table>

•

Width=” { px | % } ”

- szerokość tabeli podana w pikselach lub w względnej szerokości

ekranu.

•

Border=”px”

– grubość ramki tabeli

•

Cellspacing=”px”

– odległość pomiędzy komórkami

•

Cellpadding=”px”

– odległość zawartości komórki od krawędzi komórki

Najważniejsze parametry znacznika komórki <td>:

•

Align=” { left | right | center } ”

– poziome wyrównanie w komórce

•

Valign=” { top | middle | bottom } ”

– pionowe wyrównanie w komórce

•

Width=” { px | % } ”

- szerokość komórki podana w pikselach lub w względnej

szerokości tabeli.

Tworzenie stron internetowych w oparciu o język HTML

Ćwiczenie 5. Odwzorować tabelę

Przetestować przedstawione powyżej znaczniki tabel. Odtworzyć poniższy wydruk strony .

Głowna tabela ma szerokość 700px. Tabela wewnątrz komórki ma zdefiniowaną odległość

zawartości komórki od jej krawędzi na wartość 20 px.

Łącza (linki)

Łącza internetowe zwane często potocznie linkami są jednym z najważniejszych elementów

stron internetowych. Łącza służą do wywołania innej strony internetowej poprzez zdarzenie

kliknięcia w łącze. Łącze definiuje się za pomocą znacznika

. Pomiędzy

znacznikami wpisuje się treść, w jaką należy kliknąć, aby przejść do wywołanej strony. Stronę

do jakiej chcemy przenieść użytkownika po zdarzeniu kliknięcia w łącze definiuje się w

parametrze

href=”url lub ścieŜka wzdlędna”

znacznika

<a>.

Przykładowo, gdy łącze

umieszczone jest w dokumencie index.html, a prowadzić ma do dokumentu news.html, który

znajduje się w tym samym katalogu co plik index.html znacznik będzie wyglądał następująco:

<a href=”news.html” target=”_self”> Kliknij, aby zobaczyć news’y </a>

Parametr

target

informuje przeglądarkę o tym, w którym oknie ma otworzyć nowy

dokument. W przypadku wartości

_self

nowy dokument otwarty zostanie we własnym

oknie, dla wartości

_blank

nowy dokument otwarty zostanie w nowym oknie. Nic nie stoi na

przeszkodzie, aby otwierać nowy dokument w nowym oknie o nazwie własnej, np.:

wyniki

W takiej sytuacji dokument otworzy się w nowym oknie o wewnętrznej (nigdzie nie

Tworzenie stron internetowych w oparciu o język HTML

widocznej) nazwie

wyniki

i gdy kolejny link wywołany zostanie z parametrem

target=”wyniki”

zostanie on otwarty w tym żądanym oknie.

Możliwe jest także wykorzystanie znacznika łącza do otwarcia domyślnego w systemie

programu pocztowego z wypełnionym adresem odbiorcy. Uzyskuje się to poprzez wpisanie

zamiast ścieżki do dokumentu adresu e-mail z przedrostkiem

mailto.

Np.

<a href=”mailto:jan.kowalski@wp.pl”> Napisz do mnie </a>

Ćwiczenie 6. Stworzyć łącza

Stworzyć trzy dokumenty HTML: index.html, news.html, kontakt.html. We wszystkich dokumentach

wprowadzić przykładową treść. W każdym z dokumentów stworzyć łącza do wszystkich pozostałych

dokumentów. Łącza umieścić w tabeli wg wzoru.

Pływające ramki

Pływające ramki pozwalają na umieszczenie w jednym dokumencie HTML innego dokumentu HTML.

Okienko definiowane jest znacznikiem

. Pomiędzy znaczniki iframe wpisuje

się treść, która pojawi się w przeglądarce, która nie obsługuje pływających ramek.

Najważniejsze parametry znacznika

•

Src=”ścieŜka”

– ścieżka do dokumentu, który otwarty zostanie w okienku domyślnie po

wejściu na stronę.

•

Name=”nazwa_ramki”

– pływające okienko musi posiadać nazwę, ponieważ umożliwia to

na zdefiniowanie w znaczniku łącza

<a>

(parametr

target

) w którym pływającym okienku

ma się otworzyć dokument.

Tworzenie stron internetowych w oparciu o język HTML

•

Width=”px”

– szerokość pływającego okienka

•

Height=”px”

– wysokość pływającego okienka

•

Border=”px”

- grubość ramki okienka

Ćwiczenie 7. Pływające ramki

Przetestować przedstawiony powyżej znacznik iframe. Odtworzyć poniższy wydruk strony.

Po kliknięciu w odpowiednie łącze, przypisany do łącza dokument otworzy się w okienku

iframe.