technologie internetowe cw 01 HTML, Różne, Technologie internetowe
[ Pobierz całość w formacie PDF ]
Ćwiczenie 1
Temat:
Tworzenie stron
internetowych
w oparciu o język
HTML
Cel ćwiczenia:
Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron
internetowych z wykorzystaniem języka HTML. Student w tym module zapozna
się ze składnią języka, a w szczególności z metodami formatowania tekstu,
wstawiania grafiki, tworzenia tabel, tworzenia łączy do innych stron, a także
pozna metody zagnieżdżania stron w pływających ramkach.
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:
<znacznik> … … … </znacznik>
Tworzenie stron internetowych w oparciu o język HTML
2
Znaczniki samodzielne – znaczniki występujące samodzielnie bez konieczności
zamknięcia, które po nazwie znacznika mają symbol „/”
<znacznik />
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:
<znacznik parametr1=”wartość1” parametr2=”wartość2”> … … … </znacznik>
lub np. :
<znacznik parametr1=”wartość1” />
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
3
Przykład definicji typu dokumentu:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
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:
<html>… … … </html>
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:
<head> … … … </head>
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:
<title> … … … </title>
Po sekcji nagłówkowej znajduje się sekcja treści dokumentu :
<body> … … … </body>
Schematyczną strukturę dokumentu prezentuje Rysunek 1.
Tworzenie stron internetowych w oparciu o język HTML
4
HTML
HEAD
META TITLE
TITLE ...
...
BODY
TEKST OBRAZY
OBRAZY
TABELE
TABELE
MULTIMEDIA
RAMKI
ODNOŚNIKI
Rysunek 1 Schemat struktury dokumenty HTML
Zadanie 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.
<small> … </small>
- tekst pomniejszony
<big> … </big>
- tekst powiększony
Tworzenie stron internetowych w oparciu o język HTML
5
HTML
META
TITLE
TEKST
OBRAZY
[ Pobierz całość w formacie PDF ]