W trakcie zajęć PTI studenci zapoznają się z podstawami tworzenia stron WWW przy użyciu XHTML. Standard języka opisany jest na stronie http://www.w3.org/1999/xhtml/

Literatura

W księgarniach oraz na stronach WWW dostępnych jest wiele kursów XHTML. Poniżej kilka odnośników:

  1. Kurs XHTML i CSS (helion.pl)
  2. Kurs XHTML (webmade.org)
  3. Różne kursy do pobrania m.in. XHTML (algorytmy.pl)
  4. Kurs HTML, XHTML, CSS (signs.pl)

Jak założyć stronę WWW na serwerze student?

  1. Odnajdujemy katalog /home/www/login (login zastępujemy swoim własnym). Uwaga: jak można zauważyć jest to zupełnie inny katalog niż nasz katalog domowy
  2. Tworzymy plik z kodem XHTML (plik tekstowy) i nazywamy go index.html
  3. Plik ten umieszczamy w katalogu /home/www/login upewniając się, że ma nadane prawa do odczytu dla wszystkich
  4. W okienku przeglądarki internetowej plik ten będzie widoczny pod adresem https://student.fizyka.pw.edu.pl/~login
  5. Plik(i) z kodem XHTML oraz inną nazwą np. umieszczony w katalogu /home/www/login plik o nazwie dwa.html będzie widoczny w przeglądarce pod adresem: https://student.fizyka.pw.edu.pl/~login/dwa.html
  6. W katalogu /home/www/login można tworzyć również podkatalogi. Przykład: plik o nazwie /home/www/login/Katalog_1/plik_1.html będzie widoczny jako https://student.fizyka.pw.edu.pl/~login/Katalog_1/plik_1.html

Przykłady stron

W trakcie zajęć omawiane są różne elementy języka XHTML. Poniżej kilka przykładów stron WWW. Żeby zobaczyć źródło strony należy na oglądanej stronie kliknąć prawym przyciskiem myszy i wybrać opcję ogładania źródła (np. View Page Source)

  1. Najprostszy przykład strony w XHTML (zawiera tytuł strony i jeden akapit)
  2. "Surowa" strona z wierszem oraz ta sama strona po odpowiednim formatowaniu (w XHTML1.0 Transitional); pokazane różnego typu znaczniki. Dla zainteresowanych: strona ta została również przepisana do HTML5, gdzie możliwe jest bezpośrednie umieszczanie na stronie WWW wzorów oraz elementów grafiki wektorowej (zob. przykłady na dole tej strony). Uwaga: ze względu na fakt, że nie wszystkie rozwiązania możliwe do stosowania w "XHTML1.0 Transitional" można stosować również w (X)HTML5, na stronie w niektórych miejscach zastosowano style (CSS), omawiane szerzej na kolejnych zajęciach. Przydatne linki:
  3. Przykład jak opisać stronę (znaczniki 'meta', 'title')
  4. Kilka przykładów tabelek
  5. Przykład zastosowania kaskadowych arkuszy stylów (CSS)
  6. Przykład użycia wzorów LaTeXa w kodzie XHTML

Tabela dostępnych kolorów

Zaliczenie

Jednym z elementów zaliczenia PTI jest napisanie własnej strony WWW na dowolnie wybrany temat związany z nauką lub na temat własnych zainteresowań. Możliwe jest również wcześniejsze zaliczenie tej partii materiału. Strona WWW powinna być umieszczona w katalogu /home/www/login/ (to również element zaliczenia!) i powinna być napisana w standardzie XHTML. W przypadku strony składającej się z podstron zaleca się zrobienie maksymalnie dwóch podstron linkowanych ze strony głównej (razem trzy strony). Strona powinna zawierać następujące elementy:

  1. Nagłówki
  2. Akapity
  3. Listę/listy w tym zagnieżdżone
  4. Hiperłącza (linki) do innych stron WWW
  5. Hiperłącze do samego obrazka (np. do zdjęcia)
  6. Obrazek, który sam jest hiperłączem
  7. Umieszczony na stronie obrazek (image)
  8. Tabelkę
  9. Dodatkowo strona musi być odpowiednio opisana, czyli tytuł, słowa kluczowe, opis, e-mail autora itp., czyli odpowiednio przygotowana zawartość znacznika 'head'
  10. Wymagane jest użycie (dowolnie wybranych) elementów CSS, a fragment ze stylami powinien być umieszczony w zewnętrznym pliku linkowanym do strony

Jest również rzeczą oczywistą, że (na obecnym etapie) nie chodzi o wygenerowanie takiej strony w jednym z wielu dostępnych kreatorów stron, ale o nauczenie się podstawowych elementów języka XHTML (dlatego strona powinna być napisana od podstaw w zwykłym edytorze tekstów).

Oceny: Maksymalna ocena to 5.0. Za każdy brakujący element ww. listy lub błąd np. błąd składni lub niezgodność ze standardem języka odejmuje się 0.25 (ten sam błąd pojawiający się kilka razy ma odjęte 0.25, ale tylko jeden raz). Dodatkowo 0.25 jest odejmowane za błędy w umieszczeniu strony, pliku ze stylami i obrazków na serwerze lub problemy z ich odczytem.
W przypadku gdy strona WWW jest sprawdzana jedynie na zaliczenie ('zal') wymagane jest użycie przynajmniej pięciu z dziesięciu elementów powyższej listy. Cztery z nich muszą być użyte całkowicie bezbłędnie.

Uwaga: "odbiór" strony WWW odbywa się wyłącznie w obecności prowadzącego zajęcia. Podczas sprawdzania strony prowadzący PTI może zadać kilka pytań (lub poprosić o dokonanie drobnych zmian) sprawdzających samodzielność wykonania strony.


Pomocne strony: walidator xhtml oraz walidator css