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/