Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw

Lekcja 1: Znaczniki Charakterystyczną cechą kodu HTML są tzw

Lekcja 1: Znaczniki
Charakterystyczną cechą kodu HTML są tzw. znaczniki (tagi), które służą do formatowania
wprowadzanych na stronę internetową treści, informując przeglądarkę jak powinna wyświetlić
teksty i obrazy umieszczone pomiędzy znacznikami.
Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst
okreslający rodzaj znacznika.
Większość znaczników występuje w parach - są to znacznik otwierający (określający miejsce od
którego rozpoczyna się 'działanie' znacznika) i znacznik zamykający (określający miejsce, w którym
to oddziaływanie się kończy). Znaczniki zamykające wyglądają tak samo jak otwierające :) - różnią
się jedynie 'ukośnikiem' (slash).
Do przekazania przęglądarce polecenia wyświetlenia tekstu jako osobnego paragrafu (akapitu)
służy para znaczników (otwierający i zamykający)
<p> </p>
Każdy tekst umieszczony pomiędzy nimi zostanie przez przeglądarkę potraktowany jak akapit, np.
wprowadzenie kodu:
<p> Paragraf 1</p>
<p> Paragraf 2</p>
<p> Paragraf 3</p>
spowoduje wyświetlenie trzech odrębnych akapitów.
Jeśli nie uwzględnimy znaczników:
Paragraf 1
Paragraf 2
Paragraf 3
przeglądarka internetowa nie otrzyma żadnych poleceń formatujących i wyświetli cały tekst w
jednej linii.
Zadanie 1
Wpisz oba powyższe przykłady w Notatniku.
HTML nie jest wrażliwy na sposób zapisu, kod odczytywany jest liniowo, jedno polecenie po drugim.
Obydwa zamieszczone poniżej fragmenty kodu zostaną zinterpretowane tak samo:
<p> Paragraf 1</p>
<p>
Paragraf 1
</p>
Zadanie 2
Wpisz oba powyższe przykłady w Notatniku.
Atrybuty
Niektórym znacznikom można przypisywać tzw. atrybuty, które oddziaływują dodatkowo na
elementy zawarte między znacznikiem otwierającym a zamykającym.
Do znacznika paragrafu (akapitu) można np. dodać atrybut align(wyrównywanie). Przybiera on
m.in. wartości:

left - wyrównanie do lewej strony

right - wyrównanie do prawej strony


center - wycentrowanie w poziomie
justify - wyrównanie do prawej i do lewej strony
Atrybut wraz z wartością jaką przyjmuje wprowadzamy do znacznika otwierajacego. Wartość
atrybutu przypisujemy za pomocą znaku równości (=). Zaleca się umieszczanie wartości atrybutu
wewnątrz cudzysłowu.
Przykład
<p align='right'>
To jest tekst wyrównany do prawej strony
</p>
Zadanie 3
Wprowadź własny tekst. Przypisz atrybutowi 'align' wartości ’ left’,’ right’,'center' oraz 'justify'
(każdy paragraf powinien zawierać przynajmniej dwie linijki tekstu). Pokaż zadania
prowadzącemu.
Lekcja 2: Znaczniki formatujące tekst
Znaczniki formatujące tekst zmieniają jego wygląd, np.:

rodzaj i wielkość czcionki,


pochylenie tekstu,
porubienie itp.
Przykłady
<font> </font>
kilka atrybutów, z pośród których można wyróżnić:
color - określa kolor tekstu zawartego między znacznikami :
<font color='green'> przykładowy tekst </font>
face - rodzaj czcionki (należy pamiętać, że wybrana czcionka musi znajdować się na
komputerze osoby, która ogląda naszą stronę - najbezpieczniej stosować czcionki
najczęściej występujące np. Arial, Verdana, TimesNewRoman):
<font face='Arial'> przykładowy tekst </font>
size - wielkość czcionki (liczby z przedziału 1-7):
<font size='1'> przykładowy tekst </font>
Atrybuty można łączyć ze sobą w ramach jednego znacznika :
<font face='Verdana' size='7' color='blue'> przykładowy tekst </font>
Inne znaczniki formatujące to np.:
<b></b>
Pogrubienie tekstu między znacznikami (bold).
tekst 1 <b>tekst 2</b> tekst 3
Pochylenie tekstu między znacznikami (kursywa).
tekst 1 <i>tekst 2</i> tekst 3
Znaczniki formatujące mogą występować razem np. wprowadzenie znaczników:
<b><i>tekst 2</i></b>
zmusi przeglądarkę internetową do wyświetlenia tekstu pochylonego i jednocześnie pogrubionego.
Zadanie 4
Wprowadź powyższe przykłady wpisując własny tekst zamiast słów „przykładowy tekst (paragraf
powinien zawierać przynajmniej dwie linijki tekstu). Pokaż zadanie prowadzącemu.
Lekcja 3: Znaczniki rozdzielające
Jak już wspomniano istnieją znaczniki 'pojedyncze', nie mające elementu 'zamykającego'.
Zaliczamy do nich dwa znaczniki 'rozdzielające':
<br>
który wymusza przejście do nowej linii,
<hr>
który również wymusza przejście do nowej linii, wstawiając dodatkowo linię rozdzielająca
(takiego znacznika użyto np. u góry tego tekstu za słowami 'Znaczniki rozdzielające').
Przykłady
tekst1<br>tekst2
Efekt wyświetlenia tak zapisanego kodu jest w zasadzie podobny do wyświetlenia znanego już
Państwu kodu
<p>tektst1</p><p>tekst2</p>
W znaczniku rozdzielającym nie możemy jednak zapisać atrybutów, takich jak np. sposób
wyrównywania tekstu (align).
Wprowadzając kilka znaczników rozdzielających możemy zwiększyć odstęp między dwoma
tekstami:
tekst1<br><br><br>tekst2
Efektem interpretacji kodu z użyciem znacznika hr:
Tytuł rozdziału<hr>Treść rozdziału
będzie rozdzielenie tekstów poziomą linią.
Zadanie 5
Wprowadź powyższe przykłady wpisując własny tekst zamiast słów „ tekst (paragraf powinien
zawierać przynajmniej dwie linijki tekstu).
Lekcja 4: Odsyłacze
Na systemie odsyłaczy (linków, hiperłączy, odnośników hipertekstowych) oparta jest zasada
działania systemu stron WWW. Stosuje się je do poruszania się w obrębie danej witryny (menu
strony to zespół linków umożliwiających odwiedzenie poszczególnych podstron). Można również,
przy ich pomocy, skierować użytkownika do dowolnej strony internetowej o znanym adresie (tak
działają np. wyszukiwarki, które zwracają wynik wyszukiwania jako zestaw linków (odsyłaczy) do
stron, na których odnalazły poszukiwaną frazę).
Odsyłacze tworzy się używając znaczników:
<a></a>
Pomiędzy nimi można umieścić dowolny tekst lub grafikę (o wstawianiu grafiki zobacz w następnej
lekcji) np.:
<a>strona o systematyce nieparzystokopytnych</a>
Znacznik <a> posiada kilka atrybutów, z których najważniejsze to:
href
– definiuje adres podstrony lub strony internetowej, którą przeglądarka ma wyświetlić, po
kliknięciu na link.
target
– określa w jaki sposób przeglądarka ma otworzyć stronę – może przybierać różne wartości
najważniejsze to domyślny '_self' (w tym samym oknie, czyli zastąpić nową stroną stronę
którą oglądamy) i '_blank' (otworzyć stronę w nowym oknie).
Umieszczony na stronie głównej (index.html) link (odsyłacz) do podstrony poświęconej
kotom będzie wyglądał następująco:
<a href='koty/koty.html'>strona o kotach</a>
a psom myśliwskim:
<a href='psy/myśliwskie/psy.html'>strona o psach myśliwskich</a>
Powyższe adresy podstron to tzw. ścieżki względne – strona z linkami (index.html)
znajduje się w katalogu głównym więc 'ścieżki' informują jak podstrony usytuowane są
względem tego katalogu.
Tworząc linki (odsyłacze) do stron 'obcych' nie podaje się ścieżek ale pełny adres strony,
np.:
<a href='http://www.math.uni.lodz.pl'>strona główna UŁ</a>
Taki adres musi zaczynać się wyrażeniem http:// - adres najłatwiej pobrać z paska adresu
przeglądarki.
Uwaga - nowe wersje przeglądarek ukrywają pełen adres (np. Chrome) i przedrostek
http:// trzeba dopisać samemu.
Wróćmy do atrybutu target, zapis:
<a href='http:// www.math.uni.lodz.pl' target='_self'> strona główna UŁ
otworzy się w tym samym oknie</a>
spowoduje wyświetlenie strony strony UAM w tym samym oknie, a kod:
<a href='http:// www.math.uni.lodz.pl' target='_blank'> strona główna UŁ
otworzy się w nowym oknie</a>
wyświetli ją w nowym oknie (lub zakladce).
Zamiast tekstu w znaczniku <a></a> można umieścić grafikę – wtedy przejściu na inną
stronę/podstronę nastąpi po kliknięciu obrazka.
Innym zastosowaniem znacznika <a></a> jest wysyłanie poczty na podany adres e-mail, za
pomocą zainstalowanego na komputerze programu pocztowego.
Składnia wygląda następująco:
<a href='mailto:dowolny@adres'>dowolny tekst</a>
np.:
<a href='mailto:wiertelak@ math.uni.lodz.pl' >napisz do mnie</a>
Zadanie 6
Wprowadź powyższe. Pokaż zadanie prowadzącemu.
Lekcja 5: Umieszczanie obrazów na stronie
Znacznik obrazka to:
<img>
W języku HTML znacznik ten nie posiada znacznika zamykającego.
Atrybuty
src - adres obrazka
Na stronie internetowej nie można opublikować obrazka, który znajduje się na twardym dysku
naszego komputera. Zapisanie adresu/ścieżki w postaci
C:\wybranykatalog\obrazek.jpg
nie jest możliwe. Nasze komputery nie posiadają oprogramowania serwerów i dostęp do zasobów
zgromadzonych na ich twardych dyskach (na szczęcie) nie jest możliwy (a przynajmniej nie jest
taki prosty :).
Aby umieścić obrazek na stronie najpierw powinniśmy wysyłać go do naszego katalogu na serwerze
- adres obrazka podaje się wtedy, tak jak adresy odnośników w postaci ścieżki 'html'owej'.
Jeśli zamierzasz wykorzystać obrazek ze strony dostępnej w internecie musisz podać jego pełny
adres (poprzedzony http://). Aby pobrać adres obrazka z dowolnej strony należy kliknąć na nim
prawym przyciskiem myszy i wybrać opcję ‘Kopiuj adres obrazka’, ‘Kopiuj adres URL grafiki’ itp., w
zależności od rodzaju przeglądarki jakiej używasz (w Internet Explorerze można kliknąć opcję
‘Właściwości’ a następnie skopiować adres).
Uwaga! W tym przypadku zamieszczamy na naszej stronie cudzą własność i należy pamiętać, że
może to naruszać (i zapewne narusza) prawo autorskie. Zamieszczać można jedynie obrazy na
wykorzystanie których otrzymaliśmy zgodę autora lub takie które są wyraźnie oznaczone jako do
tego celu przeznaczone (na niektórych stronach obrazy mogą być zabezpieczone przed
wyświetlaniem w innych witrynach).
Oto przykład kodu wyświetlającego zdjęcie, w tym przypadku pobrane ze strony plfoto.com:
<img src='http://plfoto.com/zdjecia/371683.jpg'>
width - szerokość obrazka
height - wysokość obrazka
Korzystając z tych atrybutów można zmienić rozmiary, w jakich przeglądarka wyświetli obrazek na
stronie. Najczęściej używaną jednostką miary są piksele (px). Jeśli podamy tylko jeden
parametr,drugi zostanie dopasowany automatycznie z zachowaniem proporcji.
<img src='http://plfoto.com/zdjecia_new2/1651611.jpg' width='100px'>
lub
<img src='http://plfoto.com/zdjecia_new2/1651611.jpg' width='550px'>
Na koniec jeszcze sposób zapisania linku (odnośnika) w postaci obrazka:
href='http://www.zin.ru/animalia/siphonaptera/index.htm'>
<img src='http://www.ucmp.berkeley.edu/arthropoda/uniramia/fleasmall.gif'>
</a>
Powyższy odnośnik przekierowuje na strony Instytutu Zoologii w St. Petersburgu, a obrazek
pobierany jest ze stron Muzeum Paleontologii Uniwersytetu Kalifornijskiego...
Zadanie 7
Wprowadź powyższe. Pokaż zadanie prowadzącemu.
Lekcja 6: Znaczniki określające stukturę dokumentu
<html>
<head>
</head>
<body>
</body>
</html>
Uwaga! Klikając [zobacz] zobaczymy tylko pustą stronę - te znaczniki nie wyswietlają żadnych
informacji na stronie - służą jedynie do określenia jej struktury.
Znaczniki
<html> </html>
informują przeglądarkę, że strona zawiera kod HTML. Można je w zasadzie pominąć ponieważ HTML
jest domyślnym kodem :). Zaleca się jednak ich stosowanie.
Sam dokument podzielony jest na dwie sekcje - head (nagłówek) i body (część główna
dokumentu).
W nagłówku, pomiędzy znacznikami
<head> </head>
umieszcza się informacje, które nie są widoczne na stronie, takie jak tytuł strony, opis (widoczny
np. w wyszukiwarce Google), słowa kluczowe, system kodowania znaków itp.
W części 'głównej', pomiędzy znacznikami
<body> </body>
znajduje się natomiast cała treść strony widoczna dla osób przeglądających naszą witrynę.
Przykład
<html>
<head>
<title>Kurs HTML</title>
</head>
<body>
<p>To jest tresc...</p>
</body>
</html>
Znacznik body ma klika atrybutów pozwalających wpływać na wygląd strony
m.in. bgcolor określający kolor tła strony.
Do atrybutu bgcolor można np. przypisać angielskie nazwy kolorów (red, green, yellow, silver
itp.):
<html>
<head>
<title>Kurs HTML</title>
</head>
<body bgcolor='red'>
<p>To jest tresc...</p>
</body>
</html>
Zadanie 8
Wprowadź powyższe. Pokaż zadanie prowadzącemu.
Zadanie 9
Stwórz stronę zawierającą różne style i kolory czcionek, obrazek, odnośnik do innej strony oraz
możliwość wysłania maila. Pokaż zadanie prowadzącemu.
http://www.zd.amu.edu.pl/html/