Projektowanie Witryn internetowych II › ~napieral › download › instrukcja 1.pdf · 2015-03-23 · jest tworzenie własnych reguł kolorowania składni), a także automatyczne

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


Zajęcia 3 45 min Projektowanie layaoutu i zawansowane techniki styli w CSS3 45 min Projektowanie layaoutu i zawansowane techniki styli w CSS3


Zajęcia 4 45 min Formularze w HTML5

45 min Formularze w HTML5


Zajęcia 5 45 min Praca z multimediami w HTML5 45 min Praca z multimediami w HTML5


Zajęcia 6 45 min Praca z elementem canvas

45 min Praca z elementem canvas


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


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% × 𝑜𝑐𝑒𝑛𝑎 𝑝𝑟𝑜𝑗𝑒𝑘𝑡 𝑘𝑜ń𝑐𝑜𝑤𝑦


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

http://www.w3schools.com/html/html5_intro.asp

http://www.kurshtml.edu.pl/html/html5.html

https://www.google.pl/

http://www.w3.org/

http://dev.w3.org/html5/

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML

http://how2html.pl/edytor-kodu/

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.


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%

http://www.bennewitz.com/bluefish/stable/source/


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ń.

http://fmbip.com/litmus/

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.


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


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:



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/>.


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ą.


Ćwiczenie sprawdzające Należy stworzyć stronę tak by była wyglądała jak ta zaprezentowana na poniższym zrzucie ekranowym.

Documents

Projektowanie Witryn internetowych II › ~napieral › download › instrukcja 1.pdf · 2015-03-23 · jest tworzenie własnych reguł kolorowania składni), a także automatyczne