====== Laboratorium, TIiM, HTML ====== ===== Wprowadzenie ===== HTML jest podstawą stron i aplikacji WWW. Na tym laboratorium przygotują Państwo w kilku krokach zestaw kilku połączonych ze sobą dokumentów HTML. **Wszystkie dokumenty powinny być przygotowane w oparciu o standard XHTML 1.0/Strict, w kodowaniu UTF-8.** Realizowaną przez Państwa stronę należy umieścić na serwerze, tak aby była dostępna z zewnątrz przez HTTP - ułatwi to pracę z zewnątrz oraz ocenianie. Jest to możliwe m.in. na serwerach ''borg.kis.agh.edu.pl'' oraz ''student.agh.edu.pl''. Umieszczenie dokumentu o nazwie ''index.html'' w katalogu ''~/public_html'' na ''borgu'' spowoduje, że dokument będzie dostępny pod adresem ''http://borg.kis.agh.edu.pl/~nazwa_uzytkownika'' gdzie ''nazwa_uzytkownika'' jest nazwą użytkownika na ''borgu'' oraz ''http://borg.kis.agh.edu.pl/~nazwa_uzytkownika/index.html''. Każdy inny dokument będzie dostępny pod nazwą zgodną z nazwą pliku. Np. ''inny.html'' (po umieszczeniu w katalogu ''public_html'') będzie dostępny jako: ''http://borg.kis.agh.edu.pl/~nazwa_uzytkownika/inny.html''. Analogicznie na ''studencie''. ==== Edytor ==== Pliki HTML są //de facto// plikami tekstowymi, mogą więc być edytowane przy pomocy podstawowych narzędzi, jak ''joe'' czy ''vi''. Specjalizowane edytory mają jednak zalety, takie jak: * podświetlanie i podpowiadanie składni danego języka, * zarządzanie wcięciami, * możliwość "zwijania" bloków kodu (ang. //code folding//), * wsparcie dla różnych stron kodowych, * możliwość wyświetlenia podglądu w przeglądarce, * wsparcie dla walidatorów (lokalnych i zdalnych). ==== Walidatory ==== Poprawność dokumentów (X)HTML można sprawdzić przy pomocy walidatorów. Podstawowym walidatorem wykorzystywanym przy tworzeniu stron jest http://validator.w3.org/. Umożliwia on walidację: * stron zlokalizowanych na serwerze, poprzez ich URI, * plików HTML przesłanych przy pomocy formularza, * kodu HTML wklejonego do pola tekstowego. W przypadku wystąpienia błędów, wyświetlane jest obszerne wyjaśnienie wraz ze wskazówkami jak je poprawić. ==== Dokumentacja HTML ==== W sieci znajduje się wiele źródeł wiedzy o znacznikach HTML i zasadach ich stosowania. Do najważniejszych należą: * http://www.w3.org/TR/xhtml1/ * http://www.w3.org/TR/html401/ * http://www.w3schools.com/tags/default.asp * http://www.poradnik-webmastera.com/polecenia/html/znaczniki/ - mniej kompletna lista, za to po polsku ===== Ćwiczenia ===== ==== Ćwiczenie 1: podstawy HTML ==== Utwórz nowy dokument, zgodny ze standardem XHTML 1.0/Strict, z kodowaniem UTF-8. **[2 punkty]** Dokument powinien zawierać następujące elementy: - poprawne dyrektywy formatu dokumentu, - sekcja ''head'' zawierająca: - tytuł dokumentu z polskimi znakami - dyrektywę ustawiającą odpowiednie kodowanie znaków w przeglądarce - sekcja ''body'' zawierająca: - strukturę kilku sekcji o co najmniej dwóch poziomach zagłębienia, elementy muszą być umieszczone w odpowiedniej (pragmatycznej) kolejności tak jak pokazano poniżej **[2 punkty]** tytul rozdzialu (h1) ... tytul podrozdzialu (h2) a nie np.: tytul podrozdzialu (h2) ... tytul rozdzialu (h1). - w każdej z sekcji kilka akapitów tekstu (może być automatycznie wygenerowany - http://pl.lipsum.com/) - w conajmniej jednym z akapitów kilka słów z polskimi znakami Proszę dokonać walidacji dokumentu przy pomocy http://validator.w3.org/. Po usunięciu wszystkich błędów i ostrzeżeń, proszę umieścić na utworzonej stronie znaczek walidatora zgodnie z instrukcjami na stronie. **[2 punkty za komplet poprawnie walidujących się stron]** ==== Ćwiczenie 2: formatowanie tekstu ==== Utwórz nowy dokument, zawierający jeden akapit tekstu w języku polskim i jeden nagłówek (oraz oczywiście odpowiednie dyrektywy, meta, itd.). W akapicie powinny znajdować się elementy: - tekst pisany kursywą - na dwa sposoby - tekst pogrubiony - na dwa sposoby - fragmenty kodu (inline) - na dwa sposoby - prosty wzór matematyczny z indeksami górnym i dolnym oraz znakami "większe od" oraz "mniejsze od" - w wybranym miejscu, ręcznie złamana linijka Przy pomocy odpowiednich encji spraw, aby w tekście nie występowały tzw. "sieroty" (zob. [[http://pl.wikipedia.org/wiki/Sierota_(DTP)]]). Dodaj do dokumentu kilkulinijkowy fragment kodu w dowolnym języku programowania zawarty w odpowiednim znaczniku. Zwaliduj dokument i dodaj grafikę potwierdzającą poprawność (jak w ćw. 1). Na jednej z tworzonych podstron proszę umieścić odpowiedzi na pytania: - Jaka jest różnica między znacznikami ''i'' oraz ''em''? Czy zawsze dają identyczne wyniki? - Jaka jest różnica między znacznikami ''b'' oraz ''strong''? Czy zawsze dają identyczne wyniki? - Jaka jest różnica między znacznikami ''code'' oraz ''samp''? Czy zawsze dają identyczne wyniki? - Jaka jest różnica pomiędzy fragmentem strony sformatowanej tak: ''

...

...

'' oraz fragmentem o następującej postaci: ''

...

...

''? ==== Ćwiczenie 3: tabele i listy ==== Utwórz nowy dokument, zawierający trzy nagłówki (trzy sekcje); w pierwszej sekcji umieść tabelę **[2 punkty]**, w drugiej wielopoziomową listę (wypunktowaną oraz numerowaną) **[1 punkt]**, a w trzeciej - wykaz definicji kilku terminów **[1 punkt]**. Tabela powinna: * mieć wyróżnione sekcje ''thead'', ''tbody'' i ''tfoot'' * posiadać jeden wiersz nagłówka i kilka wierszy zwykłych komórek * wykorzystywać łączenie komórek w pionie i w poziomie oraz kombinację powyższych Lista w drugiej sekcji powinna zawierać kilka poziomów i wyglądać np. tak (proszę się nie przejmować rodzajem znaczników list - to będziemy formatować na następnym laboratorium): - Element - Element - Element * drugi poziom * drugi poziom - Element - Numeracja drugiego poziomu - Numeracja drugiego poziomu - Trzeci - Trzeci - Numeracja drugiego poziomu - ... Zwaliduj dokument i dodaj grafikę potwierdzającą poprawność (jak w ćw. 1). ==== Ćwiczenie 4: obrazy ==== Utwórz nowy dokument, zawierający jeden nagłówek i dwa akapity tekstu (oraz oczywiście odpowiednie dyrektywy, meta, itd.). Umieść na wysokości pierwszego i drugiego akapitu obraz z wybranego pliku graficznego (powinien być zlokalizowany na zewnętrznym serwerze i zlinkowany przy pomocy adresu bezwzględnego lub na serwerze lokalnym). **[2 punkty]** Zwaliduj dokument i dodaj grafikę potwierdzającą poprawność (jak w ćw. 1). ==== Ćwiczenie 5: hiperłącza ==== - W każdym ze stworzonych w poprzednich ćwiczeniach plików umieść, przy pomocy listy wypunktowanej, odnośniki do pozostałych plików. **[2 punkty]** - W plikach zawierających kilka sekcji umieść kotwice o wybranych nazwach przy początkach poszczególnych sekcji oraz zbiór linków powodujących przesunięcie strony do danej sekcji. **[2 punkty]** - W każdym z plików, spis treści oraz zasadnicza treść strony powinna znajdować się w osobnych elementach ''div'' (czyli w każdym pliku po dwa takie elementy).