Tworzenie stron internetowych w oparciu o język HTML

Transkrypt

Ć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>
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.
3
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:
<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.
4
HTML
HEAD
META
BODY
...
TITLE
OBRAZY
TEKST
MULTIMEDIA
RAMKI
TABELE
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
5
•
<i> … </i> - kursywa
•
<b> … </b> - tekst pogrubiony
•
<strong> … </strong> - tekst wzmocniony
•
<sup> … </sup> - indeks górny
•
<sub> … </sub> - indeks dolny
•
<h1> … </h1> - 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 <font> … </font>. 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ę.
Zadanie 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
o
rozmiarze
3
pisany
czcionką
Tahoma.
Przykładowy czerwony tekst o rozmiarze 6
pisany czcionką Times New Roman.
6
Średnia arytmetyczna
Definicja
Nagłówek h1
Nagłówek h2
Kursywa, pogrubienie, wzmocnienie
z kursywą, indeksy dolne. Tekst w
nawiasach to tekst pomniejszony.
Średnią arytmetyczną n wartości pomiarowych nazywamy wynik ilorazu sumy wszystkich
wartości pomiarowych (x1 + x2 + … + xn) przez ilości wszystkich składników pomiarowych (n).
Wzór
Nagłówek h2
Wzór reprezentujący średnią arytmetyczną:
Kursywa i pogrubienie
Indeks dolny
SR = (x1 + x2 + … + xn) / n
Gdzie: x1-n - kolejne wartości pomiarów, n - liczba wszystkich pomiarów
Kursywa i
indeks dolny
Akapity, bloki i listy
Tekst organizowany jest za pomocą bloków i list. Blok akapitu reprezentuje znacznik:
<div> … … … </div>
lub znacznik:
<p> … … … </p>
Znaczniki akapitu mogą zostać opatrzone parametrem align, który odpowiada za poziome
wyrównanie tekstu w danym akapicie np.
<div align=”right”> … … … </div>
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).
7
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 (<li> … </li>) umieścimy kolejną listę uzyskamy listę
zagnieżdżoną (patrz przykład - ćwiczenie 3).
Zadanie 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
8
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.
Zadanie 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 .
9
Tabele
Tabele (<table> … </table>) składają się z wierszy (<tr> … </tr>), 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 }
Valign=” { top | middle | bottom }
” – poziome wyrównanie w komórce
” – pionowe wyrównanie w komórce
Width=” { px | % } ” - szerokość komórki podana w pikselach lub w względnej
szerokości tabeli.
10
Zadanie 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
<a> … </a>. 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
11
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:[email protected]”> Napisz do mnie </a>
Zadanie 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 <iframe> … </iframe>. 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 <iframe>:
•
•
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.
12
•
•
•
Width=”px” – szerokość pływającego okienka
Height=”px” – wysokość pływającego okienka
Border=”px” - grubość ramki okienka
Zadanie 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.
13

Tworzenie stron internetowych w oparciu o język HTML

Transkrypt

Podobne dokumenty

program Projektowanie graficzne w Adobe Photoshop CS5 z

Więcej na http://www.kurshtml.boo.pl

pdf z przypomnieniem zasad

Elektroniczny system znakowania 4-calowy znacznik kulisty

Znaki specjalne\374

HTML – Podstawy języka i jego historia.

SPryTNy ZNAcZNIK bOISK I OgrOdóW

Przemierzając krainę 1001 Nocy, Twoja karawana

Znaczniki RFID