Laboratorium, TIiM, HTML

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.

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

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

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

Utwórz nowy dokument, zgodny ze standardem XHTML 1.0/Strict, z kodowaniem UTF-8. [2 punkty]

Dokument powinien zawierać następujące elementy:

1. poprawne dyrektywy formatu dokumentu,
2. sekcja head zawierająca:
   1. tytuł dokumentu z polskimi znakami
   2. dyrektywę ustawiającą odpowiednie kodowanie znaków w przeglądarce
3. sekcja body zawierająca:
   1. 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).

1. w każdej z sekcji kilka akapitów tekstu (może być automatycznie wygenerowany - http://pl.lipsum.com/)
2. 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]

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:

1. tekst pisany kursywą - na dwa sposoby
2. tekst pogrubiony - na dwa sposoby
3. fragmenty kodu (inline) - na dwa sposoby
4. prosty wzór matematyczny z indeksami górnym i dolnym oraz znakami „większe od” oraz „mniejsze od”
5. 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:

1. Jaka jest różnica między znacznikami i oraz em? Czy zawsze dają identyczne wyniki?
2. Jaka jest różnica między znacznikami b oraz strong? Czy zawsze dają identyczne wyniki?
3. Jaka jest różnica między znacznikami code oraz samp? Czy zawsze dają identyczne wyniki?
4. Jaka jest różnica pomiędzy fragmentem strony sformatowanej tak: <p>…</p><p>…</p> oraz fragmentem o następującej postaci: <p>…<br/><br/>…</p>?

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):

1. Element
2. Element
3. Element
   • drugi poziom
   • drugi poziom
4. Element
   1. Numeracja drugiego poziomu
   2. Numeracja drugiego poziomu
      1. Trzeci
      2. Trzeci
   3. Numeracja drugiego poziomu
5. …

Zwaliduj dokument i dodaj grafikę potwierdzającą poprawność (jak w ćw. 1).

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

1. W każdym ze stworzonych w poprzednich ćwiczeniach plików umieść, przy pomocy listy wypunktowanej, odnośniki do pozostałych plików. [2 punkty]
2. 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]
3. 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).