laboratorium I
2015
Piotr Napieralski
Laboratorium I
2015-03-02
Projektowanie Witryn internetowych II
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Spis treści Sylabus............................................................................................................................................................. 2
Warunki zaliczenia ........................................................................................................................................... 2
Literatura ......................................................................................................................................................... 3
Strony internetowe ..................................................................................................................................... 3
Książki .......................................................................................................................................................... 3
Kursy DVD .................................................................................................................................................... 3
Wprowadzenie ................................................................................................................................................ 4
Edytor, przeglądarka i do przodu ................................................................................................................ 5
Składnia i semantyka ....................................................................................................................................... 8
Sekcje w HTML5 .......................................................................................................................................... 9
Style strony ................................................................................................................................................ 11
Komentarze ............................................................................................................................................... 11
Formatowanie ........................................................................................................................................... 12
Listy ........................................................................................................................................................... 12
Hiperłacza .................................................................................................................................................. 13
Przykład ......................................................................................................................................................... 14
Ćwiczenie sprawdzające ................................................................................................................................ 15
Sylabus Termin zjazdu Godzina Temat
Zajęcia 1 45 min Test kompetencyjny
45 min Informacje wprowadzające (historia, składnia i semantyka)
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 2 45 min Praca ze stroną w HTML5 45 min Praca ze stroną w HTML5
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 3 45 min Projektowanie layaoutu i zawansowane techniki styli w CSS3 45 min Projektowanie layaoutu i zawansowane techniki styli w CSS3
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 4 45 min Formularze w HTML5
45 min Formularze w HTML5
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 5 45 min Praca z multimediami w HTML5 45 min Praca z multimediami w HTML5
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 6 45 min Praca z elementem canvas
45 min Praca z elementem canvas
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 7 45 min Aplikacje offline i geolokalizacja
45 min Aplikacje offline i geolokalizacja 45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia 8 45 min Wykorzystanie gotowych wzorców, projekt własnej strony internetowej
45 min
45 min Konsultacje i wyznaczenie tematyki projektów końcowych
Zajęcia 9 45 min JavaScript i HTML5
45 min
45 min Zadanie cząstkowe - ćwiczenie sprawdzające
Zajęcia ostatnie
45 min Końcowy test weryfikacyjny
2 h Weryfikacja końcowych projektów,
Warunki zaliczenia Podczas zajęć studenci będą rozwijali własny projekt strony internetowej. Dodatkowo na ostatnich
zajęciach każdy ze studentów będzie pisał krótki test sprawdzający. Ocena końcowa składa się z oceny z
projektu końcowego (projekt zostanie oceniony na podstawie krótkiej obrony polegającej na
odpowiedzeniu na trzy pytania z zakresu projektu) oraz z oceny z testu sprawdzającego. Wpływ na ocenę
końcową mają również aktywność na zajęciach, polegająca na samodzielnym rozwiązywaniu zadań
cząstkowych podczas zajęć.
𝑜𝑐𝑒𝑛𝑎 𝑘𝑜ń𝑐𝑜𝑤𝑎 = 40% × 𝑜𝑐𝑒𝑛𝑎 𝑧 𝑡𝑒𝑠𝑡𝑢 + 10% × ś𝑟𝑒𝑑𝑛𝑖𝑎 𝑜𝑐𝑒𝑛𝑎 𝑧 𝑧𝑎𝑑𝑎ń 𝑐𝑧ą𝑠𝑡𝑘𝑜𝑤𝑦𝑐ℎ + 50% × 𝑜𝑐𝑒𝑛𝑎 𝑝𝑟𝑜𝑗𝑒𝑘𝑡 𝑘𝑜ń𝑐𝑜𝑤𝑦
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Literatura
Strony internetowe [1] Kurs W3C- HTML5 W3Schools: http://www.w3schools.com/html/html5_intro.asp
[2] Kurs HTML5 Sławomira Kokłowskiego - http://www.kurshtml.edu.pl/html/html5.html
[3] Wyszukiwarka Google – https://www.google.pl/
[4] Strona World Wide Web Consortium http://www.w3.org/
[5] Dokumentacja HTML5 World Wide Web Consortium http://dev.w3.org/html5/
[6] Kurs internetowy Mozzili https://developer.mozilla.org/en-US/docs/Web/Guide/HTML
[7] Lekcje HTML5 – kurs podstawowy http://how2html.pl/edytor-kodu/
Książki [1] Christopher Schmitt, Kyle Simpson „HTML5 Cookbook Solutions & Examples for HTML5
Developers”, O'Reilly Media 2011
[2] Chuck Hudson, Tom Leadbetter “HTML5 Developer's Cookbook”, Addison-Wesley 2011
[3] Jennifer Niederst Robbins “HTML5 Pocket Reference, 5th Edition” O'Reilly Media 2013
[4] Andy Harris “HTML5 For Dummies” Wiley 2011
[5] Bartosz Danowski “Wstęp do HTML5 i CSS3” Helion 2011
[6] Adam Freeman HTML5. Przewodnik encyklopedyczny Helion 2013
[7] Bartosz Danowski HTML5. Ćwiczenia praktyczne Helion 2012
Kursy DVD [1] Grzegorz Róg „Kurs HTML5 w praktyce” www.eduweb.pl 2011
[2] Wydawnictwo Strefa Kursów „Kurs HTML5 zaawansowany” 2014
Wprowadzenie Patrząc na stronę internetową w przeglądarce, widzisz na najprostszym poziomie słowa. Słowa te mają
charakterystyczny styl, różnią się czcionkami , ich rozmiarem czy kolorem. W wielu przypadkach strona
wyświetla również obrazy oraz filmy. Czasami na stronie znajdują się formularze gdzie możesz wprowadzić
(bądź wyszukać ) informacje, oraz dopasować wygląd strony do swoich potrzeb. Często strona posiada
zawartość która się poruszą bądź zmienia podczas gdy reszta strony pozostaje niezmienna.
Kilka technologi (takich jak CSS, JavaScript, Flash, AJAX, JSON) może być wykorzystanych do zdefiniowania
elementów strony internetowej. Jednakże na najniższym poziomie strona internetowa jest zdefiniowana za
pomocą HTML (HyperText Markup Language). Bez HTML nie ma strony internetowej. HTML jest powłoką,
która utrzymuje wszystko razem: międzynarodowym standardem, którego specyfikacja jest zarządzana
przez World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group
(WHATWG). Konstrukcja języków HTML i CSS jest standaryzowana i określona przez odpowiednią
specyfikację. Jest to konieczne w celu zachowania porządku oraz uniezależnienia języków od platform
sprzętowych i rozwiązań programowych poszczególnych twórców przeglądarek.
W 1980 fizyk Tim Berners-Lee, pracujący dla ośrodka naukowo-badawczego CERN, stworzył prototyp
hipertekstowego systemu informacyjnego – ENQUIRE. System wykorzystywano do organizowania i
udostępniania dokumentów związanych z badaniami naukowymi. Rewolucyjność pomysłu polegała na tym,
że użytkownik, posługując się odnośnikami, mógł z jednej lokalizacji przeglądać dokumenty fizycznie
znajdujące się w innych miejscach na świecie.
W 1989 Berners-Lee i inżynier oprogramowania CERN Robert Cailliau przedstawili równolegle dwie
propozycje hipertekstowych systemów informacyjnych opartych na sieci Internet. Oba projekty cechowała
podobna funkcjonalność. Rok później opracowali wspólną propozycję zaakceptowaną przez CERN – projekt
WorldWideWeb (W3).
Pliki zawierające odpowiednie znaczniki HTML i CSS są dokumentami tekstowymi, a co za tym idzie, mogą
być tworzone i przeglądane za pomocą dowolnego edytora tekstu, np. systemowego Notatnika. W
zależności od zawartości rozszerzenie pliku może się różnić, jednak nadal mamy do czynienia z dokumentem
tekstowym. Poniżej znajduje się wykaz najpopularniejszych typów plików wraz z opisem ich zawartości:
Rozszerzenie Opis zawartości htm plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript html plik tekstowy zawierający kod HTML, CSS, czasami też kod JavaScript shtml plik tekstowy zawierający kod HTML, CSS oraz instrukcje SSI — pliki takie są
przetwarzane przez serwer przed wysłaniem do przeglądarki php pliki tekstowe zawierające kod HTML, CSS połączony ze skryptami PHP cgi pliki tekstowe zawierające skrypty napisane w Perlu bądź Shellu — często połączone
z kodem HTML; pl pliki tekstowe zawierające skrypty napisane w Perlu — często połączone z kodem
HTML; js pliki tekstowe zawierające skrypty napisane w języku JavaScript css pliki tekstowe zawierające zewnętrzne arkusze stylów.
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
W HTML5 część znaczników została usunięta lub zastąpiona przez CSS:
Znacznik Użycie w HTML5
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset> <noframes>
<strike> CSS
<tt> CSS
Edytor, przeglądarka i do przodu Odpowiedni dobór edytora kodu znacznie ułatwia i przyśpiesza pracę z językiem html oraz innymi językami
programowania. Ważne jest by edytor posiadał możliwość kolorowania składni, dodatkowo bardzo
pomocne jest gdy edytor umożliwia:
domykanie znaczników,
kodowanie polskich znaków w standardzie ISO i UTF,
kreatory ułatwiające generowanie części kodu,
sprawdzanie poprawności wygenerowanego kodu.
Poniżej znajdują się łącza do popularnych edytorów (wybór edytora jest w gestii studenta):
Nazwa System operacyjny
Adobe Dreamweaver Windows
Ager Web Edytor Windows Bluefish Windows, Linux, Mac OS X
CoreEditor Windows EdHTML Windows
HateML Pro 2 Windows kED Windows
KompoZer Windows
Microsoft Expression Web Windows
Pajączek Windows
nvu Windows
PSPad Windows
Web Edit Windows
Notepad++ Windows
NetBeans Windows
Kate Linux Quanta Plus Linux
getedit Linux
Geany Linux
Smultron Mac OS X Taco HTML Edit Mac OS X
Fraise Mac OS X
Ja wybrałem edytor Bluefish – edytor, gdyż stanowi wolne oprogramowanie. Działa na większości systemów
operacyjnych zgodnych z normą POSIX, m.in. na GNU/Linuksie, FreeBSD,Mac OS X i Windows. Bluefish jest
bogatym w funkcje, a jednocześnie szybkim edytorem HTML i CSS, oferuje kolorowanie składni HTML, PHP,
C, Javy, JavaScriptu, JSP, SQL, XML, Pythona, Perla, CSS, ColdFusion, Pascala, R i Octave/Matlab (możliwe
jest tworzenie własnych reguł kolorowania składni), a także automatyczne zamykanie znaczników HTML I
XML. Pozwala na otwarcie ponad 500 dokumentów w jednym oknie programu. Umożliwia łatwe
dostosowanie interfejsu użytkownika m.in. poprzez tworzenie własnych pasków narzędzi. Jedną z funkcji
Bluefisha jest też automatyczne generowanie galerii obrazków.
Rysunek 1 Okno edytora Bluefish
Adres z którego można go pobrać: http://www.bennewitz.com/bluefish/stable/source/
Ostatnim ważnym elementem niezbędnym podczas tworzenia stron WWW jest przeglądarka. Przeglądarki
internetowe komunikują się z serwerem zazwyczaj za pomocą protokołu HTTP, aczkolwiek w obsłudze są
również inne, np. HTTPS, FTP, Gopher. Często wraz z przeglądarką dostarczane są komponenty, które
umożliwiają korzystanie z serwerów grup dyskusyjnych (protokół NNTP), poczty elektronicznej (protokoły
POP3, IMAP i SMTP) oraz serwerów plików (protokół FTP).
Trwająca na rynku wojna przeglądarek powoduje, że oprogramowanie do przeglądania stron WWW cały
czas ewoluuje w stronę większej ergonomii, użyteczności i wygody użytkownika. Czołówka
najpopularniejszych przeglądarek na świecie przedstawia się następująco (dane z grudnia 2011 według
serwisu StatCounter):
Internet Explorer – 38,64%
Google Chrome – 27,27%
Mozilla Firefox – 25,29%
Safari – 6,08%
Opera – 1,98%
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Użycie przeglądarek w Europie (dane z grudnia 2011 według serwisu StatCounter):
Mozilla Firefox – 32,46%
Internet Explorer – 31,28%
Google Chrome – 25,54%
Safari – 5,84%
Opera – 4,13%
Należy mieć świadomość, że nie wszystkie przeglądarki (nawet w najnowszych wersjach) wspierają robocze
wersje specyfikacji HTML5 i CSS3. Poniżej znajduje się wykaz przeglądarek wspierających HTML5:
Rysunek 2 Wykaz przeglądarek wspierających HTML5
Aktualny stan obsługi języków HTML5 i CSS3 przez przeglądarki z rozbiciem na konkretne wersje można
sprawdzić na stronie:
http://fmbip.com/litmus/
Jedną z najważniejszych metod tworzenia stron działających poprawnie niezależnie od przeglądarki jest
ścisłe trzymanie się specyfikacji oraz jej zaleceń.
Składnia i semantyka HTML trudno zakwalifikować do języków programowania. Jest to raczej język do oznaczania składni
(markup), który pozwala klasyfikować zawartość dokumentu z rozszerzeniem .html lub .htm zgodnie z
zasadami strukturalnymi. Pojedynczy element HTML określamy jako Tag lub znacznik. Dowolny znacznik
może zawierać skojarzone z nim atrybuty.
Poniżej znajduje się przykład atrybutów znacznika:
W składni występuje kilka charakterystycznych elementów, są to:
Znacznik otwierający - konstrukcja znaczników opiera się na ostrych nawiasach Atrybut, którego wartość ujęta jest w cudzysłowie po znaku równości
Treść, która składa się na zawartość znacznika
Znacznik domykający - kończy daną konstrukcję Znacznik określa akapit tekstu i dodatkowo posiada atrybut klasy class. W kodzie HTML występują też znaczniki, które domykane są w sposób uproszczony i nie zawierają treści, np. znacznik <img> lub znacznik <br>. Aby jednocześnie otworzyć i domknąć znacznik, korzystamy z zapisu <br/>, czyli dodajemy ukośnik przed zakończeniem znacznika. Każdy dokument HTML ma ściśle określony szkielet, który nie zmienia się w zależności od zawartości strony. Oczywiście szkielet dla strony zbudowanej na podstawie HTML5 różni się od tego wykorzystywanego w stronach bazujących na wcześniejszych wersjach języka HTML czy XHTML. Pierwszym wspólnym i obowiązkowym elementem szkieletu strony jest wpis określający rodzaj języka użytego do jej stworzenia. W przypadku strony wykorzystującej język HTML5 jest znacznik <!DOCTYPE html>. Kolejnym obowiązkowym elementem w strukturze dokumentu jest znacznik <html></html>, który odpowiada za określenie ram tworzonego dokumentu. Wszystkie elementy umieszczone pomiędzy <html></html> to właściwa zawartość strony WWW. Następnym w kolejności znacznikiem tworzącym strukturę dokumentu jest <head></head>. Jest on odpowiedzialny za określenie podstawowych właściwości strony, takich jak strona kodowa, tytuł, informacje o autorze oraz słowa kluczowe i opis strony. Dokładne informacje na temat zawartości znajdziesz w dalszej części niniejszego rozdziału. Bezpośrednio po znaczniku zamykającym </head> znajduje się <body> </body>, we wnętrzu którego zamieszczamy całą widoczną treść strony. Mówiąc jeszcze prościej, tylko to, co jest umieszczone pomiędzy znacznikami <body></body>, jest wyświetlane w oknie przeglądarki.
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Pozostałe elementy to polecenia wpływające na zachowanie przeglądarki (np. strona kodowa) lub pełniące funkcje czysto informacyjne. Poniżej znajduje się podstawowy szkielet strony HTML5:
Sekcje w HTML5 Twórcy piątej specyfikacji języka HTML dokonali analizy struktury witryny i wyróżnili w niej kilka dodatkowych sekcji, a następnie przypisali do nich nowe znaczniki, za pomocą których będziemy mogli precyzyjniej kontrolować finalny wygląd strony. Nowe znaczniki nie wpływają bezpośrednio na wygląd zawartych w nich danych, ale pozwalają zgrupować szereg innych elementów i łatwiej nimi zarządzać. Lista nowych znaczników wraz z wyjaśnieniami znajduje się poniżej.
<header></header> — pomiędzy znacznikami powinna być zamieszczona część strony, która ma charakter nagłówka i rozpoczyna Twoją stronę.
<nav></nav> — pomiędzy znacznikami powinny być zamieszczone elementy odpowiedzialne za główne menu nawigacyjne witryny.
<article></article> — pomiędzy znacznikami zamieszczamy zestaw elementów tworzących spójny artykuł (np. nagłówek i blok tekstu).
<section></section> — pomiędzy znacznikami zamieszczamy wybraną zawartość części witryny tworzącą spójną sekcję, np. tytuł i wstęp artykułu widoczny na stronie głównej.
<aside></aside> — pomiędzy znacznikami powinna być zamieszczona część strony, która jest elementem uzupełniającym główną strukturę strony.
<footer></footer> — pomiędzy znacznikami powinna być zamieszczona część strony, która ma charakter stopki i zamyka Twoją stronę.
Rysunek 3 Schemat układu strony z wykorzystaniem nowych znaczników
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Style strony Chcąc zdefiniować formatowanie dokumentu należy zdefiniować styl. Element style pozwala na
definiowanie stylów CSS w dokumencie HTML inline zamiast używania elementu link, który umożliwia
importowanie stylów z zewnętrznego arkusza stylów. Element style możesz zamieszczać w różnych
miejscach dokumentu HTML, a dokument może zawierać wiele elementów style. Nie musisz zatem
definiować wszystkich stylów w sekcji head. Przydaje się to, kiedy tworzysz strony przy użyciu szablonów,
gdyż możesz dzięki temu uzupełniać style podane w szablonie o style właściwe dla określonej strony.
Element style działa w większości popularnych przeglądarek;
Atrybuty elementu style zestawione zostały w poniższej tabeli:
Atrybut Wartość Opis
media media_query Atrybut media pozwala określić, kiedy styl ma być zastosowany do dokumentu.
scoped scoped Jeżeli w elemencie style znajduje się atrybut scoped, to styl nadawany jest jedynie rodzicowi i dzieciom elementu. Kiedy ten atrybut nie występuje, styl zdefiniowany w dowolnym miejscu dokumentu HTML odnosi się do wszystkich elementów tego dokumentu.
type text/css Atrybut type pozwala wskazać przeglądarce rodzaj definiowanego stylu. Tymczasem przeglądarki obsługują jedynie style CSS, więc atrybut ten zawsze ma wartość text/css.
Więcej tagów dotyczących definiowania styli poznamy podczas nauki CSS.
lepiej, kiedy zapoznasz się z przedstawionymi w tym rozdziale przykładami. Specyfikacja HTML5 jasno mówi,
że z elementów należy korzystać wyłącznie z powodu ich wartości semantycznej. Dla ułatwienia życia
specyfikacja jednocześnie stwierdza, że obstylowanie kojarzone z tymi elementami składa się częściowo na
znaczenie semantyczne niektórych z nich. To wymijające podejście, ale jednocześnie ułatwia zachowanie
kompatybilności ze starszymi wersjami HTML. Niektóre z tych elementów mają bardzo konkretne
znaczenie. Przykładowo, element cite służy wyłącznie do cytowania tytułów innych źródeł, np. książek bądź
filmów. Tymczasem inne elementy często służą mniej konkretnym celom i — wbrew założeniom standardu
HTML5 — mają wyraźne znaczenie prezentacyjne. Zalecam przyjąć pragmatyczne podejście. Po pierwsze,
używaj elementów służących do konkretnych zadań, o ile takowe są dostępne. Po drugie, unikaj używania
elementów, które dawniej służyły wyłącznie celom prezentacyjnym i którym wstecznie przypisano
znaczenie semantyczne (np. elementu b), a prezentacją zarządzaj przy użyciu CSS. Wreszcie, niezależnie od
ostatecznego doboru elementów, używaj ich spójnie w całym kodzie.
Komentarze W trakcie pracy nad dużymi dokumentami stosuj komentarze. Są bardzo przydatne, zwłaszcza gdy nad jedną
stroną pracuje kilku projektantów. Pozwoli to uniknąć zbędnego zamieszania. Komentarze bardzo ułatwiają
poruszanie się po samym kodzie. Do umieszczenia komentarza służy:
<!--Tu znajduje się komentarz do naszej strony-->
Formatowanie Język HTML5 wykorzystuje kilka znaczników, które służą do określenia i wstępnego formatowania większych
partii treści witryny. Do elementów blokowych możemy zaliczyć akapity, nagłówki, cytaty, poziome linie,
listy, znaczniki <div></div>, <figcaption> </figcaption>, <pre></pre> oraz <figure></figure>. Cechą
charakterystyczną każdego ze znaczników blokowych jest to, że tworzy on zupełnie nowy element, który
jest oddzielony od pozostałych wyraźną przerwą. Dalej przyjrzymy się konstrukcji każdego z tych
elementów. Pamiętaj, że wszystkie one muszą się znajdować wewnątrz znacznika <body> </body>.
Specyfikacja języka HTML przewiduje możliwość utworzenia nagłówków. Element ten jest wykorzystywany
m.in. do wygodnego dzielenia większej partii tekstu na mniejsze części. Podczas tworzenia strony do
dyspozycji mamy sześć zróżnicowanych rozmiarów nagłówków. Oto ogólny przepis na nagłówek:
<hx>Nagłówek stopnia X</hx>
Za pomocą litery x oznaczyłem stopień nagłówka. W praktyce w to miejsce wstawiamy cyfry z przedziału od
1 do 6. Wbrew pozorom znacznik <h1></h1> jest największym nagłówkiem, a <h6></h6> najmniejszym.
Kolejnym sposobem prezentacji tekstu jest jego grupowanie w bloki tekstu, zwane akapitami. Tekst
znajdujący się w akapicie automatycznie dopasowuje się do szerokości okna przeglądarki lub — jak kto woli
— do rozdzielczości. Dlatego na jednym komputerze akapit może mieć trzy wiersze tekstu, a na innym
wiersze mogą być zaledwie dwa. Jest to rzecz jak najzupełniej normalna i niestety bardzo często przy źle
zaprojektowanej stronie może prowadzić do powstawania problemu — popularnego „rozjeżdżania się”
zawartości okna przeglądarki.
Za definicję akapitu odpowiada znacznik <p></p>, który zawsze występuje z elementem domykającym.
koniecznością opublikowania na niej fragmentu tekstu pochodzącego z innej strony bądź książki lub gazety.
Sytuację taką przewidziano podczas tworzenia specyfikacji języka HTML i dodano do niej znacznik
<blockquote></blockquote>, który służy do oznaczania większego bloku tekstu będącego cytatem.
Listy Następnym elementem, z jakim możesz się spotkać przy tworzeniu stron WWW, są listy. Specyfikacja
określa trzy rodzaje list. Są to: listy punktowane, numerowane oraz definicji. Można się jeszcze spotkać z
podziałem na listy uporządkowane (numerowane) oraz nieuporządkowane (wypunktowane), ale to już
kwestia interpretacji. Do stworzenia prostej listy wypunktowanej będziemy potrzebowali kombinacji dwóch
znaczników: <ul></ul> oraz <li></li>. Znacznik <ul></ul> określa ramy listy, natomiast <li></li> to każdy jej
podpunkt. Drugim typem listy jest lista numerowana, której konstrukcja składa się ze znaczników <ol></ol>
oraz <li></li>. Zasada jest dokładnie taka sama jak w przypadku list wypunktowanych. Trzecim i ostatnim
typem listy jest lista definicji. W przypadku tego rodzaju list musimy skorzystać z większej liczby znaczników.
Po pierwsze, za pomocą znaczników <dl></dl> określamy główne ramy listy. Następnie przy użyciu
znaczników <dt></dt> oznaczamy słowo lub fragment tekstu, który chcemy szerzej opisać. Na koniec,
używając <dd></dd>, dodajemy opis. Przeglądarka sama decyduje, kiedy złamać daną linię. Działanie takie
jest przydatne, ale czasami może utrudnić pracę twórcy witryny zawierającej większą ilość tekstu. Na
szczęście w specyfikacji języka HTML znajdziemy przydatny znacznik, którego celem jest bezwzględne
wymuszenie złamania linii. Mam tutaj na myśli znacznik <br/>.
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Hiperłacza Hiperłącza są podstawą funkcjonowania stron WWW i całej sieci. Bez hiperłączy przeglądanie stron byłoby
bardzo utrudnione i wymagałoby od odwiedzającego znajomości budowy danego serwisu WWW oraz
ręcznego wpisywania odpowiednich adresów. Na szczęście mamy hiperłącza i w dość prosty sposób
możemy z nich korzystać. Jak na pewno zauważyłeś, hiperłącza odnoszą się nie tylko do danego serwisu.
Bardzo często prowadzą do innych serwisów, oddalonych od przeglądanej witryny o tysiące kilometrów,
często umieszczonych na serwerach na innym kontynencie. Użycie hiperłączy daje wręcz nieograniczone
możliwości, które poznamy w dalszej części. Budowa hiperłącza jest stosunkowo prosta i wygląda tak:
<a href="strona.html">Kliknij tu, by dowiedzeć się czegoś więcej o mnie.</a>
Przykład Poniżej znajduje się przykładowy szkielet ze zdefiniowanym układem strony i podstawową treścią.
Ostatnia aktualizacja 2015 przez Piotr Napieralski © kontakt: [email protected]
Ćwiczenie sprawdzające Należy stworzyć stronę tak by była wyglądała jak ta zaprezentowana na poniższym zrzucie ekranowym.
Top Related