| << poprzednia lekcja | [ spis treści] | nastepna lekcja >> |
UWAGA: Efekty działania znaczników nie są pokazywane na tej stronie! >> Przykłady.zip
Na początek ważna sprawa:
1) Jeśli pracujemy pod Windowsem, to ściągamy sobie program "Notepad++", który zastąpi nam standardowy windowsowy Notatnik. Dlaczego? Ponieważ po pierwsze, jest to najlepszy dostępny na rynku notatnik, a po drugie - będzie nam automatycznie kolorował składnię naszych dokumentów i numerował linijki, co zobaczycie, że okaże się bardziej, niż przydatne.
Notepad++ jest darmowy i zajmuje bardzo mało miejsca.
Pobieramy go z linku poniżej i instalujemy:
http://download.tuxfamily.org/notepadplus/6.2.2/npp.6.2.2.Installer.exe
2) Dodatkowo, od tej pory, do każdej lekcji będę przygotowywał gotowe przykłady, na których będziemy się uczyć. Przykłady do lekcji numer 2 ściągamy stąd:
http://www.szczyglis.cba.pl/lekcje_html.html2) Dodatkowo, od tej pory, do każdej lekcji będę przygotowywał gotowe przykłady, na których będziemy się uczyć. Przykłady do lekcji numer 2 ściągamy stąd:
Ściągamy archiwum (spakowane ZIP-em) i rozpakowujemy do jakiegoś folderu.
Narazie jednak nie podglądajcie zawartych tam przykładów - do wszystkiego dojdziemy powoli.
Przypomnienie
Jeśli mamy już pobrane obie powyższe rzeczy, to rozpoczynamy lekcję numer dwa. O ile pamięć mnie nie myli, to nasz pierwszy prosty dokument HTML mamy już gotowy (lekcja nr 1).
Zabrakło w tamtej lekcji wytłumaczenia odnośnie 3 znaczników, które się tam pojawiły. Przypomnijmy sobie na chwilę tamten kod.
Znaczniki, których jeszcze nie znamy zaznaczyłem na czerwono:
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>To moja pierwsza strona.</h1>
A to pierwszy tekst. <br />
<b>A to pierwszy pogrubiony tekst.</b>
</body>
</html>
Jak widać kilka znaczników tutaj użytych nie zostało opisane w poprzedniej lekcji, są to <title>, <h1> i <br />.
Znacznik <title> określa tytuł naszej strony - to co wpiszemy pomiędzy <title></title> wyświetli się jako tytuł strony na górnym pasku naszej przeglądarki. Pamiętajmy, że <title> znajduje się zawsze w sekcji <head></head> naszego dokumentu. Znacznik <h1> to natomiast nagłówek tekstu (nie mylić z nagłówkiem strony). Wszystko to co wpiszemy pomiędzy <h1></h1> zostanie wyświetlone większą czcionką i wyróźnione. Nazwa <h1> to tak naprawdę skrót od angielskiego słowa "Heading 1", a więc "Nagłówek 1".
Istnieje kilka różnych nagłówków, a różnią się one wielkością czcionki (będziemy to modyfikować, ale dopiero w następnych lekcjach).
Dla przykładu, popróbujmy i popatrzmy na efekty:
<h1>To jest nagłówek nr 1.</h1>
<h2>To jest nagłówek nr 2.</h2>
<h3>To jest nagłówek nr 3.</h3>
Pozostał nam jeszcze znacznik <br />, którego w naszych dokumentach używać będziemy bardzo często. Znacznik ten to nic innego jak przejście do nowej linii. Słowo <br>, to skrót od ang. "break line", czyli "złamanie linii".
Trzeba bowiem pamiętać, że pisząc kod w HTML, naciśnięcie klawisza Enter w tekście wcale nie spowoduje przeskoczenia do nowej linii podczas wyświetlania strony.
Przykład:
To jest pierwsza linijka tekstu.
To jest druga linijka tekstu.
To jest trzecia linijka tekstu.
Powyższy zapis wcale nie wyświetli nam linijek pod sobą, lecz wszystko zostanie wyświetlone w jednej linii.
Aby nasza strona wyświetliła się tak jak chcemy, musimy podać jej znacznik przejścia do nowej linii, tak jak w przykładzie poniżej:
To jest pierwsza linijka tekstu. <br />
To jest druga linijka tekstu. <br />
To jest trzecia linijka tekstu. <br />
Dopiero taki zapis jak powyżej spowoduje wyświetlenie linijek jedna pod drugą.
Jak zapewne też zauważyliście, znacznik <br /> występuje pojedyńczo i nie posiada znacznika zamykającego. Zamiast więc zapisu <br></br> mamy w tym przypadku zapis <br /> - znacznik jest otwierany i zamykany "za jednym zamachem". Zapamiętajmy teraz sobie, że wszystkie znaczniki, które nie posiadają oddzielnych znaczników zamykających (a będzie ich kilka) pisać będziemy właśnie w ten sposób:
<znacznik />
Atrybuty znaczników
Przejdźmy teraz do folderu, do którego pobraliśmy przykłady do dzisiejszej lekcji i wyświetlmy w przeglądarce dokument o nazwie "Lekcja2_przyklad1.html". Jak widzimy pojawiło się kilka nowych rzeczy. Otwórzmy teraz ten dokument w naszym nowym Notatniku i popatrzmy na jego kod.
Naszym oczom ukazało się coś takiego:
<html>
<head>
<title>Lekcja 2 - przykład #1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>To nagłówek numer 1</h1>
<h2>To nagłówek numer 2</h2>
<h3>To nagłówek numer 3</h3>
<hr />
A to normalny tekst. <br />
<b>Tutaj tekst pogrubiony.</b> <br />
<i>Tutaj tekst pochylony.</i> <br />
<u>A tutaj tekst podkreślony.</u> <br />
<p>
A to jest tekst objęty znacznikiem "p".<br />
Jest to tak naprawdę blok tekstu.
</p>
<p>
To też jest tekst objęty znacznikiem "p".<br />
Jest to drugi blok tekstu.
</p>
<div align="center">
A tutaj znajduje się tekst wyśrodkowany.
</div>
<hr />
</body>
</html>
Jest więc kilka nowych rzeczy, zacznijmy jednak od początku, od sekcji <head></head>. Pojawił się nam nowy znacznik o nazwie <meta>:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Jak widzimy jest on dosyć rozbudowany. Pamiętacie zapewne z lekcji pierwszej, że język HTML składa ze znaczników oraz ich atrybutów.
Tutaj właśnie mamy tego doskonały przykład. Czym są te atrybuty? Można je porównać do przymiotników w języku polskim.
Na przykład, jeśli chcielibyśmy w języku HTML opisać człowieka, to stworzylibyśmy taki zapis:
<czlowiek imie="Jan" nazwisko="Kowalski" />
W powyższym przykładzie stworzyliśmy więc znacznik <czlowiek> i podaliśmy dwa atrybuty opisujące go: imie i nazwisko.
Po nazwie każdego atrybutu natomiast określiliśmy jego wartość. I tak atrybut "imie" otrzymał wartość "Jan", a atrybut "nazwisko" otrzymał wartość "Kowalski". W taki właśnie sposób określamy atrybuty znaczników. Zawsze odbywa się to w taki sam sposób:
<znacznik atrybut1="wartość1" atrybut2="wartość2" atrybut3="wartość3"...
Atrybutów może być nieograniczona ilość, pamiętajmy jednak o jednym - wartości zawsze piszmy w cudzysłowach, wyróbmy sobie taki nawyk już teraz. Nie jest to wymagane w przypadku np. prostych wartości składających się z jednego słowa, lecz stworzy problemy przy wartościach bardziej złożonych.
Przykład:
<czlowiek imie=Jan nazwisko=Kowalski />
Jest poprawny i zostanie zrozumiany przez przeglądarkę, lecz co w przypadku, gdy imię składać się będzie z np. dwóch członów?
Przykład:
<czlowiek imie=Jan Maria nazwisko=Rokita />
Jest już błędny, gdyż słowo "Maria" w tym momencie nie dotyczy już atrybutu "imie", dlatego też całą wartość musimy tutaj objąć w cudzysłów.
Przykład:
<czlowiek imie="Jan Maria" nazwisko="Rokita" />
Dopiero taki zapis zostanie prawidłowo zrozumiany przez przeglądarkę.
Wróćmy więc do naszego przykładu i przyjrzyjmy się znacznikowi <meta>.
Dla przypomnienia, u nas wygląda on tak:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Jest to zwykły znacznik <meta> posiadający 2 atrybuty, odpowiednio: "http-equiv" oraz "content".
Żeby było przejrzyściej, rozpiszmy to tak:
<meta
http-equiv = "Content-Type"
content = "text/html; charset=utf-8"
/>
Co to są jednak znaczniki <meta> i do czego służą oraz do czego akurat służy ten powyższy?
Otóż znaczniki <meta> są to specjalne znaczniki nagłówkowe, w których przekazujemy przeglądarce informacje o wyświetlanej stronie, takie jak np. informacja o autorze, słowa kluczowe dla wyszukiwarek, czy opis strony.
Kodowanie znaków
W naszym przypadku za pomocą znacznika <meta> podajemy przeglądarce informacje z jakiego kodowania znaków będzie korzystać nasza strona.
Co to jest kodowanie znaków? Otóż jak wiadomo, na świecie istnieje cała masa alfabetów i różnych znaków. Wyobraźmy sobie litery arabskie, albo chińskie - jest tego bardzo, ale to bardzo dużo. Każda z liter, każdy znak musi być w jakiś sposób zapisany w postaci zer i jedynek, gdyż tylko na tych dwóch cyfrach potrafi operować komputer. Znaki więc są kodowane jako zwykłe liczby. Litera "a" jest np. zapisywana jako kod "97", litera "z" jako kod "122". Każda litera i każdy znak ma więc swoją postać numeryczną. Przeglądarka odczytuje zapisane znaki właśnie w postaci numerycznej i dopiero na podstawie odpowiedniego kodu wyświetla je nam ekranie. Skąd jednak przeglądarka wie, że np. kod "122" odpowiada literze "z"? Otóż przeglądarka korzysta z tzw. tablicy znaków, w której ma zapisane wszystkie możliwe znaki i litery oraz przypisane do nich odpowiadające im kody. Przeglądarka przeszukuje więc tą tablicę i szuka znaku, który zapisany jest pod numerem 122, po czym wyświetla go na ekranie. Takich tablic istnieje jednak dużo i fakt, że w jednej tablicy litera "z" występuje pod numerem 122 wcale nie musi oznaczać, że w innym systemie kodowania również będzie występować pod takim samym numerem. Dlatego też musimy powiedzieć naszej przeglądarce z jakiej konkretnie tablicy znaków będziemy korzystać podczas wyświetlania naszej strony. Czynimy to właśnie za pomocą powyższego znacznika <meta>. W naszym przypadku wybraliśmy rodzaj kodowania znaków o nazwie "UTF-8". Jest to obecnie najbardziej powszechny sposób kodowania, zawiera w sobie bardzo dużą liczbę znaków - radzę używać tylko i wyłącznie właśnie tego systemu. Zarówno teraz, jak i w przyszłości.
Jeżeli ktoś chce zobaczyć, jak wygląda taka tablica, to może to zobaczyć np. pod tym adresem: http://www.kurshtml.edu.pl/generatory/unicode.html
A co się stanie jeśli pominiemy ten krok i nie ustawimy kodowania? Przecież nasza pierwsza strona z poprzedniej lekcji wyświetliła się poprawnie pomimo, iż nie było tam znacznika <meta> odpowiedzialnego za kodowanie. Owszem, ale popatrzmy - czy na tamtej stronie wykorzystaliśmy jakikolwiek znak wykraczający poza standardowy angielski alfabet? Otóż nie. A teraz spójrzmy na przykład, na którym pracujemy obecnie - występują w nim polskie znaki, takie jak "ę", czy "ó". Zróbcie teraz eksperyment - usuńcie na chwilę linijkę odpowiedzialną za kodowanie i jeszcze raz wyświetlcie stronę. Zamiast polskich znaków pojawią się niezrozumiałe "krzaczki", gdyż przeglądarka nie wie jakiego kodowania użyliśmy, a w domyślnym kodowaniu angielskim litery takie jak "ę", czy "ó" nie występują. Zrozumiano? Myślę, że tak, więc jedziemy dalej.
W dalszej części naszego przykładu widzimy znaczniki <h1>, <h2> i <h3> - zostały omówione wcześniej, więc nie będziemy się powtarzać. Zauważcie jednak ciekawą rzecz - przeglądarka wyświetla każdy z nagłówków w następnej linii - bez konieczności użycia znacznika <br />. To samo dotyczyć będzie znacznika <p>, o którym później.
Dalej mamy znacznik <hr />. Do czego on służy? Jak widzimy na wyświetlonej stronie, znacznik ten wyświetla nam poziomą linię. Jak również widzimy, znacznik ten nie wymaga zamknięcia. Nazwa <hr> to skrót od ang. "horizontal rule", a więc "linia pozioma".
Jak widać, nazwy znaczników w HTML bardzo łatwo jest kojarzyć z nazwami w języku angielskim.
Popatrzmy dalej, mamy więc dalej tekst zwykły, pogrubiony, pochylony, a także podkreślony - za pomocą znacznika <u>, który jest skrótem od ang. "underline", czyli "podkreślenie". Występują też znaczniki przejścia do nowej linii, czyli <br />. Możecie sobie teraz poeksperymentować z tym znacznikiem, ustawić go np. linijkę wyżej, albo ustawić dwa takie znaczniki obok siebie i popatrzeć sobie jakie efekty to daje.
Tutaj mała uwaga: zarówno znacznik <br />, jak i <hr /> zapisać możemy krócej, jako <br> i <hr> - nie będzie to żadnym błędem, jednakże warto już teraz przyzwyczaić się do zapisu <znacznik />, gdyż w dobrym tonie jest, aby znaczniki nie posiadające znacznika zamykającego zapisywać właśnie w taki sposób. Przyda się to również w jeszcze jednej rzeczy, ale o tym w nastepnych lekcjach. Tak więc pamiętajcie, tego typu znaczniki zapisujemy zawsze ze spacją i slashem/ukośnikiem na końcu.
Akapity i zabawa z tekstem
Dochodzimy teraz do czegoś nowego - do znacznika <p>. Znacznik ten to skrót od ang. "paragraph", czyli po polsku - akapit.
Jak sama nazwa nazwa wskazuje, jest to po prostu oddzielny blok tekstu. Przyda się to nam później, gdy dojdziemy do formatowania akapitów. Narazie stwórzmy sobie kilka odzielnych akapitów, możemy wykorzystać jakiś krótki tekst, wkleić go do notatnika i za pomocą znaczników <p></p> podzielić go odpowiednio na kilka akapitów. Zauważcie, że pomiędzy nowymi akapitami nie używamy znacznika <br />. Przejście do nowej linii następuje automatycznie. Jak widać, znacznik <p> wymaga zamknięcia i wykorzystywany jest w następujący sposób:
<p>
To jest akapit.
</p>
Do zabawy z tekstem polecam skorzystać z popularnego w poligrafii tekstu o nazwie "Lorem Ipsum".
Wchodzimy na stronę: http://pl.lipsum.com/ i klikamy na "Generuj" w prawym, dolnym rogu. Wygeneruje nam to łaciński tekst, który brzmi bardzo naturalnie i pozwoli na dość ciekawe wypełnienie danego miejsca treścią tekstu. Lorem Ipsum pozwala na naturalniejszy podgląd treści, niż np. w przypadku wypełnienie obszaru jednorodnym tekstem, typu "bla bla bla bla", czy "test test test test". Zresztą, przekonacie się o tym sami.
Znacznik <div>
Przechodzimy teraz do bardzo ważnego znacznika, z którego korzystać będziemy praktycznie przez cały czas podczas naszej pracy.
Mowa tutaj o znaczniku <div>. Czym jest więc ten znacznik, że ma on aż tak wielkie znaczenie?
Wyobraźmy sobie, że każda strona WWW złożona jest z mniejszych elementów, z prostokątów. Wszystkie te prostokąty, odpowiednio do siebie przylegające i rozmieszczone tworzą naszą całą stroną, niejako z "klocków". Znacznik <div> jest właśnie takim prostokątnym "pojemnikiem", w którym umieszczać będziemy elementy składające się na naszą stronę. Wszystko to co umieścimy w znaczniku <div> jest niejako hermetycznie zamknięte w jego obrębie. Jeśli więc na stronie utworzymy np. znacznik <div> o szerokości 400px i zechcemy wyśrodkować w nim tekst, to tekst wyśrodkuje się nie względem całej strony, lecz względem obszaru/prostokąta stworzonego za pomocą tego znacznika. O tym jednak przekonamy się w innym przykładzie. Narazie spójrzmy na naszą stronę - jak widzimy znajduje się na niej wyśrodkowany w stosunku do całej strony tekst.
Wyśrodkowanie zostało zrobione za pomocą właśnie znacznika i nadania mu atrybutu "align", który oznacza "wyrównanie".
<div align="center">
A tutaj znajduje się tekst wyśrodkowany.
</div>
Wyobraźmy sobie tego <div'a> jako prostokąt otaczający tekst, który się w nim znajduje.
Warto wiedzieć, iż znacznik <div> posiada bardzo dużą liczbę atrybutów, tym jednak zajmiemy się podczas pracy nad następnym przykładem.
Warto także pamiętać, że <div> jeśli nie podamy mu informacji o szerokości, to zostanie on rozciągnięty na całą szerokość strony, lub jeśli znajduje się on w innym <div'ie> - na całą szerokość <div'a> nadrzędnego. Zgadza się - znaczniki <div> można w sobie zagnieżdżać i będziemy to robić bardzo często. Wróćmy jednak do przykładu, mamy tutaj znacznik <div> z podanym atrybutem "align", czyli "wyrównanie". Atrybut ten w naszym przykładzie przyjmuje wartość "center", a więc "do środka". Taka konstrukcja jak na przykładzie powoduje zatem, że wszystko to co znajduje się pomiędzy <div></div> będzie wyśrodkowywane. Możemy oczywiście wyrównać nasz tekst nie do środka, lecz np. do prawej, uczynimy to w następujący sposób:
<div align="right">
A tutaj znajduje się tekst wyrównany do prawej.
</div>
Atrybut "align" może przyjąć 4 wartości:
- left (do lewej)
- center (do środka)
- right (do prawej)
- justify (wyjustowanie)
Warto pamiętać, że zagnieżdżone w sobie <divy> dziedziczą po sobie swoje atrybuty. Co to znaczy? Wyjaśnię to na przykładzie:
<div align="right">
<div>
A tutaj znajduje się tekst wyrównany do prawej.
</div>
</div>
Jak widać tylko w przypadku pierwszego znacznika <div> podany jest atrybut wyrównania do prawej strony. W nim jednak znajduje się następny <div>, który nie ma podanego żadnego atrybutu, mówiącego mu o wyrównaniu. Co więc w takim przypadku robi drugi <div>? Przejmuje on automatycznie tą właściwość od znacznika <div>, w którym się znajduje. Jest to tzw. dziedziczenie. Tak jak w realnym życiu - dziecko przejmuje (dziedziczy) geny po swoim rodzicu.
Przykład kończy się znacznikiem poziomej linii <hr />, który omówiliśmy już wcześniej. Jest tutaj jednak coś nowego - podaliśmy dwa nowe atrybuty. Pierwszy atrybut - "size" określa w pikselach jej wysokość, natomiast drugi "noshade" mówi naszej przeglądarce, aby nie cieniowała naszej linii i wypełniła ją jednolitym kolorem. Niepodanie wysokości powoduje zawsze wyświetlenie linii o grubości 1px.
<hr size="10" noshade />
Na zakończenie wyświetlcie w przeglądarce plik "Lekcja2_przyklad1b.html". Nie otwierajcie go w Notatniku, jedynie zobaczcie w przeglądarce - tak właśnie dla przeglądarki wyglądają znaczniki <p> i <div>. Obramowanie zielone przedstawia "zasięg" znacznika <p>, obramowanie czerwone "zasięg" znacznika <div>.
Grafika na stronie
Przechodzimy do następnego przykładu. Na początek wyświetlmy w naszej przeglądarce plik o nazwie "Lekcja2_przyklad2.html".
Jak widzimy, pojawiło się tutaj coś nowego - obrazki. Za chwilę dowiemy się więc, w jaki sposób umieszcza się na stronie grafikę.
Widzimy na stronie obraz przedstawiający Monę Lisę. W pierwszym przypadku obraz ładowany jest bezpośrednio z naszego dysku, gdyż zawiera się on w folderze z naszymi przykładami. W przypadku drugim, obraz jest pobierany bezpośrednio ze strony w internecie, na której się znajduje.
Jak widać nie ma żadnej różnicy pomiędzy jednym, a drugim obrazem.
Otwórzmy teraz plik "Lekcja2_przyklad2.html" w naszym Notatniku i przyjrzyjmy się jak wygląda cały kod. Jak widać, nie jest on zbytnio skomplikowany, a większość z użytych w nim znaczników już znamy.
Pojawia się tutaj jednak nowy znacznik:
<img />
Jest to znacznik, który odpowiada za umieszczanie grafiki na stronie. Znacznik obsługuje większość popularnych formatów takich jak jpeg, png, bmp, tiff, czy gif. Jak również widać, nie wymaga on zamknięcia.
Umieszczenie grafiki na stronie za jego pomocą jest bardzo proste i sprowadza się do podania jedynie jednego atrybutu.
Przyjrzyjmy się naszemu kodowi:
<img src="obrazki/mona_lisa.jpg" />
Jak widać podany jest tutaj atrybut "src", który jest skrótem od ang. "source", czyli "źródło".
Sam znacznik <img> również jest skrótem od angielskiego słowa "image", czyli "obraz". Jedno z drugim możemy więc przetłumaczyć jako "źródło obrazu". Atrybut "src" w naszym przypadku wskazuje nam na plik o nazwie "mona_lisa.jpg", który znajduje się w folderze "obrazki".
W naszym drugim przypadku, obraz pobierany jest bezpośrednio ze strony, na której się znajduje:
<img src="http://www.magazynsztuki.pl/wp-content/uploads/2012/06/Mona-Lisa-212x300.jpg" />
Wartość parametru "src" zawiera więc tutaj pełny adres (zaczynający się od http://) do wykorzystywanego przez nas pliku.
I tutaj bardzo ważna uwaga: wchodząc na jakąś stronę internetową zazwyczaj pomijamy początkowy człon, czyli "http://", co błędem nie jest, jednakże warto pamiętać, że w przypadku nie wpisania tego na początku tak czy inaczej powoduje dopisanie go automatycznie przez przeglądarkę i dopiero wtedy wysłanie zapytania do serwera. Zwrot "http://" oznacza protokół, za pomocą którego przesyłane są dane pomiędzy naszym komputerem, a serwerem. Co to jest protokół? Jest to w telegraficznym skrócie pewna określona, uzgodniona forma komunikacji pomiędzy punktem A, a punktem B. Możemy to porównać np. do wyjazdu na wakacje. Wyjeżdzamy z domu w konkretne miejsce. Miejsce docelowe jest zawsze to samo, możemy jednak wybrać różne formy transportu, aby sie do niego dostać. Możemy pojechać rowerem, samochodem, albo pociągiem. W każdym z tym przypadków dotyczyć nas jednak będą inne przepisy ruchu drogowego, a sam transport przebiegać będzie inaczej i mieć swoje ograniczenia. Tym z grubsza są właśnie protokoły - są uzgodnionymi formami transmisji danych pomiędzy dwoma punktami. Do przeglądania stron używany jest zawsze protokół HTTP (Hyper Text Transfer Protocol), stąd też pobierając obraz ze strony w internecie korzystamy właśnie z niego.
Pominięcie nazwy protokołu, spowoduje więc, że nasz obrazek zwyczajnie się nie wyświetli.
Przykład:
<img src="www.magazynsztuki.pl/wp-content/uploads/2012/06/Mona-Lisa-212x300.jpg" />
Taki zapis nie wyświetli nam żadnego obrazu.
Warto o tym pamiętać, gdyż jest to częsty błąd wśród początkujących.
Ścieżki względne i bezwzględne
Warto się orientować, czym różni się ścieżka względna od ścieżki bezwzględnej. Jak widzimy, w przypadku pierwszego obrazu, jest on pobierany bezpośrednio z naszego dysku, z folderu o nazwie "obrazki", w przypadku drugim - z serwera w internecie.
Przenieśmy teraz nasz plik z przykładem w jakieś inne miejsce, np. na Pulpit. Zaznaczam - sam plik z przykładem. Folder "obrazki" zostawiamy tam gdzie jest. Następnie odpalmy nasz przykład w przeglądarce z innego miejsca. Co się okazuje? Obraz pierwszy nie zostaje wyświetlony, obraz drugi już tak. Dlaczego? Ponieważ w pierwszym przypadku podaliśmy tzw. ścieżkę względną, która zależna jest od położenia naszej strony na dysku, więc jeśli przenosimy sam plik ze stroną, a nie przeniesiemy folderu z obrazem, to strona tego obrazu nie znajdzie, gdyż będzie go szukać w swoim katalogu. W drugim przypadku podana jest natomiast ścieżka bezwzględna - bez względu na położenie naszego pliku ze stroną zawsze będzie wskazywać na poprawny adres. Warto o tym pamiętać.
Wiemy już zatem jak w prosty sposób wyświetlić na stronie grafikę, teraz dowiemy się co jeszcze możemy zrobić za pomocą znacznika <img>.
Przejdźmy do kolejnego przykładu - wyświetlmy w przeglądarce plik o nazwie "Lekcja2_przyklad3.html" i przyjrzyjmy się mu dokładnie. Na wszystkich 5 pod-przykładach jest ten sam obraz, umieszczony w folderze "obrazki", a jednak sposób jego wyświetlenia zmienia się. Wykorzystane zostały inne atrybuty znacznika <img>. Przyjrzyjmy się dokładnie każdemu z tych przykładów.
Na początek najedźmy myszką na obraz z Przykładu #1. Pojawi nam się "dymek" z opisem "To jest Mona Lisa", następnie spójrzmy niżej - w przykładzie #2 obrazek został zmniejszony do szerokości 100px, w przykładzie #3 pojawia się obramowanie wokół zmniejszonego obrazka, w przykładzie #4 zamiast obrazu wyświetla się tekst zastępczy, podobnie w przykładzie #5, z tą różnicą, że tutaj podane zostały wymiary obrazka, którego brakuje.
Otwórzmy teraz "Lekcja2_przyklad3.html" w naszym Notatniku i popatrzmy na kod.
Zacznijmy od przykładu #1:
<img src="obrazki/mona_lisa.jpg" alt="Tu powinna być Mona Lisa" title="To jest Mona Lisa" />
Pojawił się atrybut "title". Atrybut ten odpowiada za tekst, który wyświetlony zostaje w "dymku" w momencie najechania myszką na obraz. W naszym przypadku jest to tekst "To jest Mona Lisa". Pojawił się również atrybut "alt", który spowoduje wyświetlenie tekstu zastępczego w przypadku, gdy wywoływanego obrazka nie będzie można wyświetlić. Słowo "alt" to skrót od ang. "alter", czyli "alternatywne/inne", słowo "title" to po polsku "tytuł/nazwa".
Przykład #2:
<img src="obrazki/mona_lisa.jpg" alt="Tu powinna być Mona Lisa" title="To jest Mona Lisa - zmniejszona" width="100" />
Pojawił się tutaj atrybut "width" (szerokość), który określa w pikselach szerokość naszego obrazu. Istnieje jeszcze analogiczny atrybut "height", który określa wysokość obrazka. Pamiętajmy, że podając tylko jeden z tych atrybutów (czyli np. tylko wysokość, bez szerokości, lub na odwrót) atrybut drugi obliczany jest automatycznie z zachowaniem proporcji obrazka. W naszym przypadku podaliśmy szerokość, która jest mniejsza od rzeczywistej szerokości obrazu, więc wyświetlony on zostanie pomniejszony. W dobrym tonie jest podawanie zarówno szerokości jak i wysokości obrazu, o czym przekonacie się w ostatnim przykładzie.
Przykład #3:
<img src="obrazki/mona_lisa.jpg" alt="Tu powinna być Mona Lisa" title="To jest Mona Lisa - zmniejszona i z ramką" width="100" border="7" />
Na powyższym przykładzie pojawił się kolejny nowy atrybut - "border", który oznacza "obramowanie". Jako wartość podajemy grubość ramki obrazka wyrażoną w pikselach.
Przykład #4:
<img src="brak_pliku.jpg" alt="Tu powinna być Mona Lisa" title="To jest Mona Lisa" />
Tutaj troszkę inny przykład - celowo podałem adres do obrazu, który nie istnieje, żeby zaprezentować przydatność atrybutu "alt". Jak widzimy, w miejsce obrazka pojawia się tekst zastępczy.
Przykład #5:
<img src="brak_pliku.jpg" alt="Tu powinna być Mona Lisa" title="To jest Mona Lisa" width="212" height="300" />
Analogicznie jak w przykładzie poprzednim, jednak tutaj podaliśmy dodatkowo wysokość i szerokość naszego obrazu. Jak widać, podanie tych wartości spowoduje wyświetlenie zarysu obrazu, nawet jeśli z jakiegoś powodu obrazu wyświetlić nie można.
I to w zasadzie tyle na dziś, w następnej lekcji zajmiemy się hiperłączami i tabelami oraz jeśli starczy miejsca (materiał będzie długi i trudny), to zrobimy małe wprowadzenie do używania stylów CSS. Podczas następnej lekcji nauczymy się m.in. jak wykonać coś takiego:
 |
| Zrzut ekranu z przykładu przygotowanego do lekcji nr3. |
Praca domowa:
W ramach pracy domowej, polecam pobawić się w umieszczanie obrazków, ich pozycjonowanie za pomocą <div>, oraz popracować nad formatowaniem wpisanego tekstu "Lorem Ipsum" za pomocą <p>, <b>, <i> i <br />.
| << poprzednia lekcja | [ spis treści] | nastepna lekcja >> |
UWAGA: Efekty działania znaczników nie są pokazywane na tej stronie! >> Przykłady.zip
Ten komentarz został usunięty przez autora.
OdpowiedzUsuńBardzo fajnie, że powstają takie strony jak ta i mogą nauczyć osoby chętne podstaw tworzenia stron www zaczynając od znajomości języka HTML. Jeśli z czasem nasza wiedza będzie znacznie większa to nic nie stoi na przeszkodzie, aby postarać się pracować dla https://craftware.pl i brać udział w naprawdę wielkich projektach pisząc oprogramowanie dla firm.
OdpowiedzUsuń