Narzędzia użytkownika

Narzędzia witryny


pl:tiim:lab_tiim_html

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 HTMLde 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żą:

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

  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]

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

  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>?

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

  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

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

  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).
pl/tiim/lab_tiim_html.txt · ostatnio zmienione: 2021/01/08 14:09 (edycja zewnętrzna)