Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Uniwersytet Warszawski

Wydział Fizyki

Marcin Mazurek

Nr albumu: 184462

Opracowanie strony WWW dla

II Pracowni Fizycznej

Wydziału Fizyki

Uniwersytetu Warszawskiego

Praca licencjacka

na kierunku Fizyka

w zakresie Metod Komputerowych Fizyki

Praca wykonana pod kierunkiem

prof. dr.

hab. Michała Nawrockiego

z Zakładu Fizyki Ciała Stałego

Instytutu Fizyki Doświadczalnej

Warszawa, lipiec 2006

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Oświadczenie kierującego pracą

Oświadczam, że niniejsza praca została pr

zygotowana pod moim kierunkiem i

stwierdzam, że spełnia ona warunki do przedstawienia jej w postępowaniu o
nadanie tytułu zawodowego.

Data

Podpis kierującego pracą

Oświadczenie autora (autorów) pracy

Świadom odpowiedzialności prawnej oświadczam, że niniejsza praca dyplomowa
została napisana przeze mnie samodzielnie i nie zawiera treści uzyskanych w
sposób niezgodny z obowiązującymi przepisami.

Oświadczam również, że przedstawiona praca nie była wcześniej przedmiotem
procedur związanych z uzyskaniem tytułu zawodowego w wyższej uczelni.

Oświadczam ponadto, że niniejsza wersja pracy jest identyczna z załączoną
wersją elektroniczną.

Data Podpis autora (autorów) pracy

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Streszczenie

Celem pracy jest stworzenie strony internetowej dla II Pracowni Fizycznej

Wydziału Fizyki. Serwis przeznaczony jest głównie dla studentów Wydziału Fizyki

UW oraz asystentów prowadzących ćwiczenia w II Pracowni. Zawiera

niezbędne informacje dla osób uczęszczających na zajęcia: instrukcje do

ćwiczeń, zdjęcia stanowisk pomiarowych, regulaminy, zasady zaliczeń,

linki, ogłoszenia, itd.

Strona ma być też wizytówką Pracowni w wirtualnym

świecie

. Do realizacji

projektu wykorzystany został język HTML 4.01.

Funkcjonująca strona

II Pracowni

Fizycznej została umieszczona pod adresem:

http://www.fuw.edu.pl/IIPPRACOWNIA/index.html.

Słowa kluczowe

II Pracownia Fizyczna, fizyka, HTML, strona WWW, pomiary, fizyka subatomowa,

optyk

a, fizyka ciała stałego

Dziedzina pracy (kody wg programu Sokrates-Erasmus)

13200 fizyka

Tytuł pracy w języku angielskim

The study of WWW page for 2nd Physics Laboratory

Faculty of Physics Warsaw University

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Spis treści

DODATEK A:

Wydruk kodu języka HTML

DODATEK B:

Funkcjonująca strona II P

racowni Fizycznej

na płycie CD

Zdjęcia stanowisk pomiarowych na płycie CD

Wstęp

Cel powstania strony dla II Pracowni Fizycznej

3. Realizacja projektu:

3.1

Wstępna analiza zawartości serwisu na podstawie

charakterystyki II PF i konsultacji z asystentami

3.2

Lista zagadnień umieszczonych na stronie

3.3 Konstrukcja strony

4. Techniczna strona powstania serwisu internetowego dla II Pracowni

Fizycznej:

4.1

O języku HTML

4.2 Znaczniki

4.3 Szkielet Dokumentu HTML

4.4 Ramki

4.5 Kaskadowe arkusze stylów – CSS

5. Opis gotowej strony

6. Podsumowanie

7. Bibliografia i specyfikacje internetowe

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Wstęp

Stworzenie serwisu internetowego dla II Pracowni Fizycznej jest tematem

niniejszej pracy licencjackiej. W dzisiejszych czasach Internet jest bardzo łatwo

dostępny dla przeciętnego użytkownika. Firmy, urzędy, uczelnie a także osoby

prywatne wykorzystują go w celu łatwego dotarcia do odbiorcy, któremu

prz

ekazują różne informacje. W tym samym celu powstała również strona WWW II

Pracowni Fizycznej. Za jej pośrednictwem studenci będą mieli lepszy i łatwiejszy

dostęp do wszelakich spraw dotyczących II Pracowni Fizycznej. Nie wychodząc z

domu możliwe będzie sprawdzenie aktualnych ogłoszeń, wydrukowanie instrukcji

do zbliżającego się doświadczenia bądź skontaktowanie się drogą elektroniczną z

asystentem prowadzącym dane ćwiczenie.

Obok opracowania projektu elementem pracy jest także opis całego

przedsięwzięcia,

który zawiera:

•

cele stworzenia strony internetowej,

•

kolejne etapy powstawania serwisu,

•

opis techniczny powstania witryny,

•

charakterystykę gotowej strony II Pracowni Fizycznej.

Do powstania projektu wykorzystany został bezpłatny program do edycji i

tworze

nia stron internetowych „ezHTML 2.0 Alef”. Całość napisano w języku

HTML 4,01 (HyperText Markup Language). W edycji i obróbce zdjęć stanowisk

pracy pomocna okazała się

testowa wersja programu Paint Shop Pro9.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

2. Cel powstania strony internetowej dla II Pracowni

Fizycznej.

W XXI wieku komputer i Internet to dla wszystkich jedne z głównych

sposobów zdobywania wiedzy, szukania informacji, poznawania ciekawych

zjawisk. Wychodząc naprzeciw oczekiwaniom, jakie stawia rzeczywistość i

wykorzystując możliwości, jakie ona daje, przystąpiono do realizacji projektu

stworzenia strony internetowej II Pracowni Fizycznej.

Celem powstania strony o takiej tematyce jest przekazanie wszystkich

ważnych informacji dotyczących tej właśnie pracowni jej głównym odbiorc

om, czyli

studentom, którzy na te zajęcia będą uczęszczać. W tym też celu na stronie

muszą znaleźć się takie wiadomości, które:

•

ułatwią kontakt z Pracownią i asystentami,

•

pomogą w dobrym przygotowaniu się do ćwiczeń, wykonaniu

opisów i ich późniejszym zali

czeniu,

•

zapewnią dostęp do aktualnych informacji o zmianach terminów

zajęć, dniach wolnych,

•

w kompleksowy sposób zapoznają z II Pracownią.

Serwis, przeznaczony ma być także, dla asystentów prowadzących

ćwiczenia. Za jego pośrednictwem będą w stanie szybko przekazać wszelkie

uwagi i wskazówki dla swych podopiecznych.

Strona, oprócz wymienionych celów, powinna być również wizytówką II Pracowni

Fizycznej w wirtualnym świecie.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

3. Realizacja projektu.

3.1

Wstępna analiza zawartości serwisu na podstawi

charakterystyki II PF i konsultacji z asystentami.

Przed przystąpieniem do tworzenia strony WWW pierwszym ważnym

krokiem było zastanowienie się nad tym, co powinno się na niej znajdować.

Punktem wyjścia w tych rozważaniach było zapoznanie się z całą strukturą

Pracowni, jej zasobami, tym, co oferuje studentom i jakie ma w stosunku do nich

wymagania. Należało się również zastanowić nad tym, jakich informacji odbiorca

potrzebuje a jakie są mu zbędne. W tym celu przeprowadzona została krótka

charakterystyka

II Pracowni Fizycznej. Dzięki niej można było stworzyć pierwszy

zarys wyglądu strony internetowej i jej zawartości.

II Pracownia Fizyczna to ważna jednostka całej struktury organizacyjnej i

należy do grupy przedmiotów obowiązkowych, będących w programie kształcenia

na Wydziale Fizyki Uniwersytetu Warszawskiego. Głównym jej celem jest

zapoznanie studentów z technikami eksperymentalnymi stosowanymi w różnych

działach fizyki. Zajęcia odbywają się tak w semestrze letnim jak i zimowym we

wtorki (w godz. 13 – 18) i w czwartki (w godz. 9 –

14). Wszystkie ćwiczenia

przeprowadzane są na trzecim piętrze i na parterze (ćwiczenia z Fizyki Jądrowej)

w budynku przy ul. Pasteura 7 w Warszawie. To tutaj studenci nie tylko zapoznają

się z technikami eksperymentalnymi stosowanymi w różnych działach fizyki, ale

również swoją wiedzę teoretyczną mogą sprawdzić w praktyce wybierając

interesujące ich ćwiczenia. Do dyspozycji przygotowanych jest kilkadziesiąt

nowoczesnych, dobrze wyposażonych i skomputeryzowanych stanowisk

(fotograf

ie wszystkich stanowisk pomiarowych dostępne są w dodatku B, w

katalogu „zdjęcia”).

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Fot. 3.1

tanowisko pracy do ćwiczenia C2

Pomiar drogi dyfuzji i czasu życia nośników

mniejszościowych w germanie metodą Valdesa.

/ fot. M. Mazurek; 2006/

Pracownia może pochwalić się też tym, że posiada źródło neutronów termicznych.

Jest ono wykorzystywane do pomiarów widma energetycznego fragmentów

rozszczepienia uranu

236

U wywołanego neutronami termicznymi oraz do

pomiaru

energii wiązania deuteronu.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Fot. 3.2

Źródło neutronów

termicznych

/fot. M. Mazurek; 2006/

W celu zaliczenia II Pracowni studenci

muszą wykonać trzy (wersja A), dwa

(wersja B) lub cztery (wersja dla NKF) doświadczenia. Wybrać je mogą spośród

trzech podstawowych działów:

•

fizyka subatomowa (fizyka jądrowa + fizyka cząstek elementarnych)

•

fizyka ciała stałego

•

optyka.

Ćwiczenia wykonywane są indywidualnie pod opieką asystentów. Czas trwania

jednego doświadczenia to

okres od dwóch do czterech tygodni.

Uczestnicząc w zajęciach studenci zapoznawani są również z wszystkimi

etapami eksperymentu fizycznego. Każde ćwiczenie składa się mianowici

e z kilku,

wykonywanych po kolei, części:

•

przygotowania teoretycznego,

•

kolokwium wstępnego

•

części doświadczalnej

•

sprawozdania na piśmie (opis)

•

rozmowy końcowej.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Aby przystąpić do zajęć studenci powinni mieć zaliczoną całą

I Pracownię

Fizyczną

(a i b).

Pracownia ma także za zadanie wpojenie studentom wszelkich zasad

bezpiecznej pracy podczas wykonywania ćwiczeń, prawidłowego zachowania się

na terenie pracowni oraz zapoznania się z instrukcjami dotyczącymi przyrządów.

Przed przystąpieniem do zajęć studenci przechodzą szkolenie BHP i ochrony

radiologicznej

przypadku

wykonywania

ćwiczeń

zastosowaniem

promieniowania jonizującego). Odbycie takiego szkolenia potwierdzane jest

wpisem do odpowiedniej ewidencji. Wszystko to odbywa się pod opieką

asystentów pr

owadzących ćwiczenia oraz inspektora ochrony radiologicznej.

Po wstępnym ustaleniu zawartości strony, którą ułatwiła krótka

charakterystyka II Pracowni przyszła kolej na wybór metody, pozwalającej

wszystkie informacje umieścić na stronie (w tym przypadku skorzystano z języka

HTML 4.0) oraz na opracowanie szkieletu całego serwisu, jego wyglądu, czyli

wyborze kolorów tła i liter a także, co jest ważne, dobrym i czytelnym

rozmieszczeniem całej zawartości.

Gdy powstał już szczegółowy zarys całego serwisu należało zebrać

wszystkie potrzebne materiały, których treść miała znaleźć się na stronie.

Następnie prototypowa wersja strony trafiła w ręce asystentów

prowadzących ćwiczenia na II Pracowni. Ich zadaniem było zapoznanie się z

zawartością i wyglądem serwisu oraz zaproponowanie nowych rozwiązań i

ciekawych pomysłów. Po konsultacjach z całym zespołem wybrane zostały

zagadnienia, które następnie umieszczono na stronie.

3.2

Lista zagadnień umieszczonych na stronie

W wyniku przeanalizowania charakterystyki II Pracowni i konsultacji z

asystentami powstała lista zagadnień, które powinny znaleźć się na stronie

internetowej. Do listy dołączone zostały również wymagania dotyczące zawartości

poszczególnych tematów. Oto one:

•

Strona główna

– z danymi kontaktowymi,

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

•

Ogłoszen

ia,

•

Wykaz i instrukcje do ćwiczeń

–

z dostępnymi instrukcjami w

formacie .doc i zdjęciami stanowisk wraz z opisem wybranych

przyrządów,

•

Rozkład zajęć

–

z planem zajęć II Pracowni i organizacją roku

akademickiego na Uniwersytecie Warszawskim,

•

Lista osób pro

wadzących ćwiczenia

– z miejscem na przekazanie

informacji dla studentów oraz adresem e-mailowym,

•

Wskazówki dla studentów –

dotyczące opisów i prezentacji ustnych,

•

Regulamin pracowni –

zawierający zasady wykonywania i zaliczania

ćwiczeń i pracowni oraz regulamin porządkowy,

•

Zasady bezpiecznej pracy,

•

Instrukcje BHP przy pracy z laserami,

•

Klasyfikacja laserów,

•

Stałe fizycznej,

•

Linki.

3.3 Konstrukcja strony.

W związku z dużą liczbą zagadnień oraz obszerną ilością zawartych w

serwisie treści, konstrukcja strony powinna być tak pomyślana, aby ułatwić

poruszanie się po całym projekcie. W związku z tym wykorzystano następujące

elementy poprawiające czytelność i obsługę serwisu:

•

Ramki –

sprawiają, że spis treści jest zawsze widoczny, co pozwala

na szybkie p

rzechodzenie między stronami serwisu (patrz więcej

rozdział 4.4)

•

Odsyłacze

–

odsyłają użytkownika do stron w obrębie serwisu oraz

do innych stron bez konieczności wpisywania ich adresów. Podczas

tworzenia projektu wykorzystano następujące typy odsyłaczy:

do podstrony -

serwis internetowy II Pracowni składa się z

pewnej liczby podstron, zapisanych w osobnych plikach

HTML. Aby umożliwić w nich nawigację, należy użyć

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

odsyłacza do podstron, który przeniesie użytkownika do

wszystkich podstron, ale tylko w obrębi

e serwisu. Jest to

pomocne przy tworzeniu spisu treści, chociaż hiperłącza

mogą znajdować się również w zwykłym tekście, odsyłając

użytkownika do miejsca, gdzie dany temat jest szerzej

opisany.

do etykiety -

dzięki nim nawigacja w serwisie staje się dużo

łatwiejsza. Po kliknięciu odsyłacza do etykiety, przeglądarka

internetowa

przeniesie

użytkownika

bezpośrednio

podrozdziału, a nie na początek strony, przez co nie jest on

zmuszony do samodzielnego odszukania wybranego tematu

(szczególnie w przypadku dok

umentów o dużych rozmiarach

trwa to długo). Etykietę można zdefiniować w dowolnym

miejscu strony, także wewnątrz zwykłego tekstu

do adresu internetowego –

użyty został w dziale

Linki

jest

przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki

do do

wolnych stron w obrębie całego Internetu. Adres każdej

ciekawej strony można skopiować (z paska adresu

przeglądarki) i umieścić w odsyłaczu. Dzięki temu wszyscy

użytkownicy odwiedzający witrynę II Pracowni Fizycznej będą

mogli przenieść się bezpośrednio do

wskazanej strony, bez

potrzeby wpisywania jej adresu.

Podczas projektowania strony internetowej ważną sprawą było takie jej

skonstruowanie, aby poszczególne dokumenty HTML, z których składa się serwis

miały możliwie najmniejszy rozmiar. Może się zdarzyć, że osoba, która odwiedzi

stronę II Pracowni będzie korzystała z wolnego łącza telefonicznego lub

radiowego. Długie ładowanie się serwisu mogłoby utrudnić potencjalnemu

odbiorcy korzystanie z jego zasobów. W tym celu strona pozbawiona jest

zbędnych elementów i ozdób graficznych zwiększających rozmiar pliku HTML.

Zdjęcia stanowisk są dostępne dopiero po kliknięciu odsyłaczy w postaci

miniaturek oryginalnych fotografii. Zatem ładowane są przez przeglądarkę tylko

obrazy o bardzo małych rozmiarach nie wydłużając tym samym czasu otwierania

się strony.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

4. Techniczna strona powstania serwisu internetowego

dla II Pracowni Fizycznej.

Rozdział 4 przedstawia opis serwisu internetowego II Pracowni Fizycznej

od strony technicznej. Wszystkie przykłady, o których będzie

mowa zamieszczone

są w DODATKU A umieszczonym na końcu pracy. Przy odwoływaniu się do tych

przykładów podana będzie linia kodu oraz skrót nazwy odpowiedniego z

dodatków, np.:

/p. L10 ; DA1/ - patrz linia 10 dodatek A1.

4.1

O języku HTML

Serwis II Pracowni

Fizycznej został napisany przy użyciu języka HTML

4.01, czyli Hyper Text Markup Language 4.01. HTML to język hipertekstowego

znakowania, którego twórcą jest Tim Berners

-Lee. Nad standardem HTML-a

czuwa Konsorcjum W3C (World Wide Web Consorcium) między inny

mi poprzez

rozwój technologii i zatwierdzanie specyfikacji. Język HTML pozwala na

umieszczanie w Internecie dokumentów, w treści których występować mogą

tabele, nagłówki, tekst, zdjęcia, itp. śeby stworzyć stronę WWW potrzebny jest

dowolny edytor teksu (Wo

rdPad). Aby ułatwić sobie pracę można skorzystać ze

specjalnie przygotowanych do tego celu edytorów (Pajączek, kED). Przy pisaniu

strony internetowej posłużyłem się edytorem ezHTML 2.0 Alef.

4.2 Znaczniki

Stworzone dokumenty mają oprócz nazwy rozszerzenie h

tm lub html, np.

ogłoszenia.html. Gdy otworzymy taki dokument zauważymy, że oprócz zwykłego

tekstu jest także szereg ostrych nawiasów, między którymi wpisane są litery bądź

całe wyrazy. To znaczniki, które są częścią składni języka HTML. Przeważnie

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

stosowa

ne są w parach (patrz przykład 4.2.1). Wyjątkami są między innymi:

<HR>

znacznik umieszczający poziomą linię

/p. L17 ; DA3/,   - znacznik nowego

wiersza, które występują samotnie. Dzięki nim możemy ustalać wielkość liter, kolor

tła, pogrubić lub pochylić tekst, np.:

•

tak wygląda to w edytorze:

Tekst, który ma się znaleźć na stronie.

a tak na stronie internetowej:

Tekst, który ma się znaleźć na stronie.

/przykład 4.2.1/

W tym przykładzie to znacznik otwierający, a zamykający. Ich zadanie

jest pogrubienie tekstu.

Bardzo ważnym elementem w składni języka HTML jest paragraf , który

wykorzystując atrybuty znacznika pozwala sformatować tekst ukazujący się na

ekranie. Atrybuty te należy wpisać wewnątrz znacznika otwierającego, np.:

•

tak wygląda to w edytorze:

Tekst, który ma być równany do lewej.

Tekst, który nie ma być wyrównany do lewej

a tak na stronie internetowej:

Tekst, który ma być wyrównany do lewej.

Tekst, który nie ma być wyrównany do lewej

/przykład 4.2.2/

Wykorzystany w przykładzie 4.2.2 atrybut znacznika

align=”left”

sprawił, że tekst

pierwszej linii został wyrównany do lewej.

Analizując kody języka HTML można zauważyć, że znaczniki pisane są

wielkimi bądź małymi literami. Nie ma to jednak żadnego znaczenia, znacznik

oraz przeglądarka odczyta poprawnie i za każdym razem pochyli tekst

(kursywa).

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

4.3 Szkielet Dokumentu HTML

Pewne znaczniki oraz odpowiadające im atrybuty pełnią szczególną

funkcję, tworzą mianowicie cały szkielet dokumentu HTML. Na przykładzie kodu

zawartego w pliku home.html /p. DA2/ opisane zostana cechy poszczególnych

elementów kodu:

Linia pierwsza mówi o wersji, która przekazuje przeglądarce informacje o

zestawie r

eguł, jakich powinna używać podczas edytowania strony. W projekcie

zastosowana została wersja najbardziej elastyczna, zawierająca ramki (punkt 4.4),

oraz elementy wersji przejściowej.

Pierwszym elementem w omawianym przykładzie jest znacznik otwierający

<HTML> /p L2/

a ostatnim zamykający

</HTML> /p L46/. Ich zadaniem jest

informowanie przeglądarki internetowe odpowiednio o początku i końcu

dokumentu HTML oraz o tym, że wszystko, co jest zawarte między nimi należy do

tego dokumentu.

Kolejne znaczniki to <HEAD> /p.L3/ i </HEAD> /p.L10/.

Ich obecność

wyznacza element strony, jakim jest nagłówek. Między tymi znacznikami znajduje

się znacznik

<META>

. Zawarte są tutaj wszystkie informacje przydatne

przeglądarkom, jednak nie są one wyświetlane na stronie internet

owej:

•

Linia 4 definiuje stronę kodową ISO

-8859-2 (polskie znaki),

•

Lina 5 definiuje opis strony. Z informacji tutaj zawartych korzystają

wyszukiwarki sieciowe. Opis powinien być krótki i zawierać

najistotniejsze wiadomości dotyczące strony,

•

Lina 6 to słowa kluczowe, charakteryzujące zawartość serwisu (należy

rozdzielać je przecinkami),

•

Linia 7 w tym miejscu umieszcza się informacji o twórcy strony (imię i

nazwisko lub nazwa firmy),

•

Linia 8 Dzięki niej przeglądarka rozpoznaje język

, w jakim

będzie

wyświetlana zawartość strony

•

Linia 9 zawiera tytułu bieżącej strony.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Całą, właściwą treść strony, w której zawierają się wszystkie inne znaczniki,

dotyczące formatowania, oraz sam tekst należy umieścić między znacznikami

<BODY> /p.L11/ i </BODY> /p. L45/

. Podając ich dodatkowe atrybuty, można

określić wygląd strony, czyli kolor tła

/p.L11/

i tekstu, szerokość marginesów,

akapity, czcionkę. W jednym dokumencie nie może być więcej niż jeden znacznik

<BODY>.

A oto elementy i ich atrybuty, które zostały wykorzystane p

odczas tworzenia

strony głównej (home.html):

•

<body BGCOLOR="#90C8F8”>…</body> -

określa kolor tła,

/p.

L11/

•

… -

określa rozmiar

czcionki i jej typ oraz kolor (czarny), /p.L28/

•

<IMG SRC="Obrazek.gif" border="0"> -

pozwala umieścić na

stronie obrazek/zdjęcie, w tym przypadku bez obramowania, /p.L14/

•

<hr width="60%" align="center" color="White"> - umieszcza na

środku strony linię koloru białego, która zajmuje 60% całej szerokoś

strony /p.L17/

•

<table width="100%">…</table> -

tworzy tabelę /p. L12

-19/

<tr>…</tr> - tworzy wiersz /p.L13-15/

<td>...</td> -

tworzy kolumnę /p.L14/.

Przy konstruowaniu lewej części serwisu, czyli spisu treści (spis.html)

/p.DA3/ między znacznikami <body> zastosowano następujące elementy (opisane

zostaną te, o których nie było jeszcze mowy):

•

<BODY LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff"> -

określa

kolor odnośników, przy czym: /p.L14/

LINK oznacza te, które jeszcze nie zostały użyte,

VLINK oznacza te, które zostały już użyte,

ALINK oznacza aktywne, czyli te, które właśnie zostały

użyte.

•

<a TARGET="_blank" href=http://www.fuw.edu.pl> -

odnośnik

do strony Wydziału Fizyki; znacznik <Target> i

jego atrybut

sprawiają, że strona zostanie otwarta w nowym oknie,

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

•

<A TARGET="strona" HREF="plan-

zajec.html">Rozkład

zajęć</A>

odnośnik do podstrony, która otworzy się w

prawej części serwisu. Decyduje o tym znacznik <Target>,

którego atrybutem jest nazwa prawej ramki /p.L20/.

4.4 Ramki

Przy tworzeniu konstrukcji strony dla II Pracowni Fizycznej wykorzystane

zostały tzw. ramki, które pozwalają wyświetlić w oknie przeglądarki więcej niż

jeden dokument HTML. Rysunek 4.4.1 prezentuje układ ramek jaki został

zastosowany przy tworzeniu strony:

Część statyczna,
wyposażona w system

nawigacji, w tym

przypadku spis treści

strony.
Plik o nazwie spis.html

Tutaj jest część informacyjna, strona
główna serwisu

Plik o nazwie home.html

Rys. 4.4.1

Układ ramek, jaki został zastosowany podczas tworzenia strony

II Pracowni Fizycznej.

To jak w przeglądarce wygląda strona, w której zastosowano ramki można

zobaczyć na fotografii

5.1.

Podstawowym elementem przy tworzeniu ramek jest utworzenie

dokumentu HTML o nazwie index.html, który zawiera specjalny kod /p.DA1/ i

odpowiada za konstrukcję ramek. Jest to też jedyny taki plik, w którym element

<BODY>

zastąpiony jest przez znacznik

<FRAMESET> /p.L11;DA1/.

O wyglądzie

ramek decyduje umieszczony między el

ement <FRAMESET>, znacznik

<FRAME> /p.L12-13;DA1/ oraz jego atrybuty:

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Cols –

określa liczbę kolumn (pionowych ramek) i ich szerokość

podawaną w pikselach lub procentach, /p.L11;DA1/

Rows –

określa liczbę wierszy (poziomych ramek) i ich wysokość,

Framespacing –

określa wielkość odstępu między ramkami,

/p.L11;DA1/

Frameborder –

określa czy obramowanie dzielące ramki ma być

schowane („0”) czy pokazane („1”), /p.L11-13;DA1/,

Border –

określa szerokość obramowania. /p.L11;DA1/

Noresize –

sprawia, że nie będzie możliwa zmiana rozmiarów

ramki /p.L12-13;DA1/

Jak już wcześniej wspomniano ramki pozwalają na wyświetlenie więcej niż

jednego dokumentu w oknie przeglądarki. Aby tak się stało przeglądarka musi

wiedzieć jak się odwołać do tych dokumentów. Służą do

tego kolejne atrybuty

znacznika <FRAME>:

Name –

wskazuje nazwę kojarzoną z odpowiednią ramką,

/p.L12-13;DA1/

Src –

odwołuje się do dokumentu HTML, który powinien być

wczytany przez przeglądarki /p.L12

-13;DA1/.

Strona internetowa stworzona w układzie ramek nie jest obsługiwana przez

starsze przeglądarki. Aby te przeglądarki wczytywały stronę trzeba w kodzie

języka HTML użyć elementu

<NOFRAMES> /p.L14;DA1/

. Między znacznikiem

<NOFRAMES> i </NOFRAMES>

umieszcza się polecenia, które wykonywane są

wtedy, gdy

strona będzie otwierana przez starsze przeglądarki. Tworząc serwis

dla II Pracowni między znacznikami zamieszczony został odsyłacz do pliku

spis.html, który zawiera odsyłacze do wszystkich stron serwisu /p.L14;DA1/.

Pełny, określający ramki kod języka HTML, który użyty został przy

tworzeniu tego serwisu, przedstawiony jest w DODATKU A1

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

4.5 Kaskadowe Arkusze Stylów – CSS

W tworzeniu strony dla II Pracowni Fizycznej oprócz języka HTML pomocne

okazały się style, narzędzie do formatowania stron internetowych,

które pozwala

na zrobienie tego, czego język HTML nie jest w stanie wykonać.

Arkusze stylów przydatne okazały się w kilku przypadkach. Pierwszy raz

wykorzystane zostały przy usunięciu podkreślenia w odsyłaczach do innych stron

serwisu /p.L9-13;DA3/. Pona

dto kod języka HTML nie ma możliwości utworzenia

w tekście akapitu oraz odstępu między linijkami. Aby poprawić wygląd strony

głównej należało posłużyć się znowu arkuszem stylów, który taką możliwość

posiada /p.L.36;DA2/

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

5. Opis gotowej strony.

Stworzenie serwisu II Pracowni Fizycznej wymagało, oprócz odpowiedniego

przygotowania zagadnień, również zebrania materiałów, których treść została

później zamieszczona na stronie.

Ze zbiorów II Pracowni udostępnione zostały instrukcje do ćwiczeń w

postaci plików Word, lista osób prowadzących ćwiczenia, regulamin porządkowy,

zasady zaliczeń pracowni i ćwiczeń oraz wskazówki do opisów i prezentacji

ustnych. Inspektor ochrony radiologicznej przekazał instrukcję dotyczącą zasady

bezpiecznej

pracy ze źródłami promieniotwórczymi, a asystenci prowadzący

ćwiczenia z wykorzystanie laserów udostępnili materiały dotyczące klasyfikacji

tych laserów oraz materiały mówiące o tym jak bezpiecznie ich używać.

Najwięcej czasu poświęcono jednak na wykonani

e fotografii. W tym celu

należało zapoznać się ze wszystkimi stanowiskami pomiarowymi i z pomocą

opiekunów poszczególnych doświadczeń przygotować je do sesji zdjęciowej.

Następnie wykonane zdjęcia pozostało już tylko opisać, tzn. podpisać wybrane

urządzenia i przyrządy pomiarowe. Wykonano to we współpracy z asystentami.

Tak przygotowane materiały były już gotowe do zamieszczenia ich na

stronie internetowej.

Dysponując pełną wiedzą dotyczącą wyglądy i zawartości strony można

było przystąpić do realizacji projektu. Poniżej znajduje się szczegółowy opis

gotowej strony II Pracowni Fizycznej, natomiast funkcjonujący serwis można

zobaczyć w Dodatku B, który jest w formie płyty CD. Znajduje się tam katalog o

nazwie „Strona internetowa II Pracowni Fizycznej”. Są w n

im zamieszczone

wszystkie pliki, które składają się na całą stronę Pracowni oraz dwa katalogi

„Opisy do ćwiczeń” oraz „Zdjęcia”. W pierwszym z nich znajdują się opisy (pliki

Word) do wszystkich ćwiczeń w drugim natomiast zdjęcia (pliki z rozszerzeniem

JPG)

stanowisk pracy z podpisanym przyrządami. Aby wyświetlić stronę II

Pracowni Fizycznej należy uruchomić plik o nazwie index.html.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Pierwszym elementem, który

wyświetli się odbiorcom przeglądającym

serwis będzie strona główna (patrz fot. 5.1), która jako wizytówka całej pracowni

powinna wyglądać estetycznie i czytelnie, aby zachęcić potencjalnego czytelnika.

Po lewej stronie znajduje się spis wszystkich odnośników do szczegółowej

zawartości pracy oraz linki do stron Wydziału Fizyki i Uniwersytetu

Warszawskie

go. Menu dostępne jest we wszystkich podstronach, w celu

ułatwienia poruszania się po całym projekcie. W części głównej zamieszczona jest

krótka charakterystyka II Pracowni Fizycznej, fotografia jednego ze stanowisk

pracy, dane kontaktowe, oraz cytat o tre

ści:

„U podstaw wszystkich nauk przyrodniczych leży zasada, którą można nieledwie

uważać za ich definicję: sprawdzianem wszelkiej wiedzy jest doświadczenie.

Doświadczenie jest jedyną miarą „prawdy” naukowej.”

Fot. 5.1

Wygląd strony głównej w przegląd

arce Mozilla Firefox

Feynman, Leighton and Sands 1963, p. 1-1

(tłum.

R.Gajewski)

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Poruszając się po menu znajdującym się po lewej stronie serwisu widać, że

kolejnym elementem projektu są Ogłoszenia. Tutaj studenci będą mogli znaleźć

zawsze aktualne wiadomości dotyczące pracowni, np. informacje o dniu wolnym, o

dodat

kowych terminach zapisów na ćwiczenia. Dział ten będzie cały czas

uaktualniany przez administratora strony.

ajbardziej rozbudowaną podstroną

jest trzecia z kolei, tzn. Wykaz i

instrukcje do ćwiczeń. Jak sama nazwa wskazuje na stronie tej znajduje się lis

wszystkich 33 dostępnych na II Pracowni doświadczeń. Zostały one podzielone na

trzy działy: Fizykę Ciała Stałego, Fizykę Subatomową oraz Optykę. Przy nazwie

ćwiczenia umieszczony jest jego symbol, np.:

J5 – Badanie Efektu Comptona,

L6 -

Światłowody.

Każde z tych oznaczeń znajduje się na drzwiach sali, w której odbywają się

dane ćwiczenia.

Instrukcje do doświadczeń dostępne są po kliknięciu lewym klawiszem

myszy na nazwę wybranego ćwiczenia. Aby je odczytać użytkownik powinien

posiadać zainstalowany na k

omputerze program Word firmy Microsoft.

Przy każdej nazwie ćwiczenia umieszczone są imiona i nazwiska osób je

prowadzących.

Kolejnym bardzo ważnym elementem, który znajduje się na tej stronie jest

galeria zdjęć, na którą składają się fotografie stanowisk p

racy (patrz fot. 5.2).

Podpisane są na nich przyrządy wykorzystywane podczas doświadczeń. Student

przeglądając zdjęcia już w domu będzie mógł się zapoznać ze stanowiskiem, przy

którym przyjdzie mu pracować.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

Fot. 5.2

Stanowisko pracy wraz z podpisanymi

przyrządami do ćwiczenia L4

– Laser

barwnikowy. /fot. M. Mazurek; 2006/

Rozkład zajęć to kolejny element całego projektu. Osoby odwiedzające

stronę i klikające na ten link, dowiedzą się, w jakie dni i w jakich godzinach otwarta

jest II Pracown

ia Fizyczna. Umieszczona jest tutaj również organizacja bieżącego

roku akademickiego na Uniwersytecie Warszawskim.

Następna podstrona to Lista osób prowadzących ćwiczenia. Przy każdym

imieniu i nazwisku znajduje się informacja o tym, jakie oraz z jakiego działu

doświadczenie prowadzi dana osoba. Ważnym elementem na tej stronie jest

kolumna zatytułowana

Uwagi.

W sytuacji, gdy asystent będzie miał do

przekazania studentom pilne informacje dotyczące ćwiczeń, które prowadzi,

będzie mógł je umieścić właśnie w t

ym miejscu.

Aby zapewnić osobom korzystającym z serwisu i uczęszczającym na Pracownię

kontakt z opiekunami, na stronie umieszczony został link do listy wszystkich

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

pracowników Wydziału Fizyki. Są tam podane numery telefonów i pokoi oraz

adresy e-mailowe.

Dalszymi elementami, które zawiera strona internetowa II pracowni

Fizycznej są warunki zaliczeń, wskazówki do opisów, regulaminy oraz instrukcje

BHP. W tym celu umieszczone zostały następujący odnośniki:

•

Wskazówki dla studentów –

są tutaj podpowiedzi dla s

tudentów

przygotowujących opisy oraz ustne prezentacje.

•

Regulamin pracowni – student znajdzie tutaj wszelkie potrzebne informacje

dotyczące wykonywania i zaliczania ćwiczeń i pracowni. Umieszczony jest

tutaj również Regulamin porządkowy mówiący o prawidło

wym zachowaniu

się na zajęciach.

•

Zasady bezpiecznej pracy –

kontakt ze źródłami promieniotwórczymi

wymusza na pracownikach i studentach znajomość podstawowych, ale

jakże ważnych zasad.

•

Instrukcje BHP przy pracy z laserami –

są tu podstawowe wiadomości

dot

yczące bezpiecznego obchodzenia się z laserami.

•

Klasyfikacja laserów –

umieszczone są tu definicje klas laserów.

Znajomość pełnych treści w/w podpunktów ułatwi bezpieczne wykonywanie

ćwiczeń i zaliczenie pracowni.

Śledząc stronę WWW II Pracowni można zauważyć, że studenci

uczęszczający na zajęcia z tego przedmiotu muszą w celu zaliczenia ćwiczeń

sporządzać opisy, w których wykonują wiele obliczeń, stosując przy tym dużą

liczbę wzorów. W tym celu na stronie umieszczone zostały wybrane stałe fizyczne

(równi

eż w wersji do druku), które w wielu wzorach występują, a których

znajomość jest nieobowiązkowa. Dzięki temu student nie będzie musiał szukać za

każdym razem wartości poszczególnych stałych.

Kolejnym elementem całego projektu są

Linki

. Tutaj znajdują się odnośniki

do ciekawych stron poświęconych nie tylko fizyce. Wraz z upływającym czasem

podstrona ta będzie zwiększać swoją zawartość. Każda interesująca strona

zostanie tutaj umieszczona.

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

6. Podsumowanie

Wykorzystując możliwości języka HTML oraz dostępne materiały udało się

stworzyć stronę internetową, która w kompleksowy sposób zapoznaje

użytkowników strony z II Pracownią Fizyczną. Można mieć nadzieję, że

skompletowane w jednym miejscu i udostępnione instrukcje do ćwiczeń, zdjęcia

poszczególnych stanowisk

pracy stałe fizyczne oraz warunki zaliczeń będą,

patrząc z perspektywy osób uczęszczających na pracownie, bardzo pomocne

podczas przygotowywania się do zajęć.

Funkcjonująca strona II Pracowni Fizycznej została umieszczona pod adresem

http://www.fuw.edu.pl/IIPRACOWNIA/index.html

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

7. Bibliografia i specyfikacje internetowe

1) Karow B., Pfaffenberg B., HTML 4, Biblia. Gliwice: Helion, 2001

2) Owczarz A., Paint Shop Pro 9 -

Zostań mistrzem”

. Gliwice: Helion, 2005

Sokół M., ABC języka HTM

L. Gliwice: Helion, 2002

4) www.kurshtml.boo.pl – strona interneto

wa zawierająca kurs html

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

DODATEK A

WYDRUK KODÓW JĘZYKA HTML

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

DODATEK A1

0 index.html

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
2 <HTML>
3 <HEAD>
4 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-
2">

5 <META NAME="Description" CONTENT="Strona zawiera informacje dotyczące

II
Pracowni Fizycznej na Wydziale Fizyki Uniwersytetu Warszawskiego">

6 <META NAME="Keywords" CONTENT="II pracownia fizyczna, fizyka, Wydział

Fizyki, Uniwersytet Warszawski, pracownia">
7 <META NAME="Author" CONTENT="Marcin Mazurek">
8 <META HTTP-EQUIV="Content-Language" CONTENT="pl">
9 <TITLE>II Pracownia Fizyczna</TITLE>
10 </HEAD>
11 <FRAMESET COLS="210,*" BORDER="1" FRAMEBORDER="1"
FRAMESPACING="1">
12 <FRAME NAME="spis" NORESIZE FRAMEBORDER="1" SRC="spis.html">
13 <FRAME NAME="strona" NORESIZE FRAMEBORDER="1"
SRC="home.html">

14 <NOFRAMES><A HREF="spis.html">Spis treści</A></NOFRAMES>

15 </FRAMESET>
16 </HTML>

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

DODATEK A2

0 home.html

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
2<HTML>
3<HEAD>
4 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-
2">
5

<META NAME="Description" CONTENT="Strona zawiera informacje dotyczące

II
Pracowni Fizycznej na Wydziale Fizyki Uniwersytetu Warszawskiego">
6 <META NAME

="Keywords" CONTENT="II pracownia fizyczna, fizyka, Wydział

Fizyki, Uniwersytet Warszawski, pracownia">
7 <META NAME="Author" CONTENT="Marcin Mazurek">
8 <META HTTP-EQUIV="Content-Language" CONTENT="pl">
9

<TITLE>Strona główna</TITLE>

10</HEAD>

11<BODY BGCOLOR="#90C8F8">
12<table align="center" border=0 width="90%">
13 <tr>
14 <td align="center"><IMG SRC="Obrazek.gif" border="0"></td>
15 </tr>
16 <tr>
17 <td align="center" bgcolor="#5080B0">Ul. Pasteura 7, Warszawa 02-093; tel.: (0-22)55-46-
848</td>
18 </tr>
19 </table>
20<hr width="60%" align="center" color="White"> 
21<table border=0 width="90%">
22<tr>
23<td>
24

U podstaw wszystkich nauk przyrodniczych leży zasada,

którą możną nieledwie uważać za ich definicję:

sprawdzianem wszelkiej wiedzy jest doświadczenie...

Doświadczenie jest jedyną miarą "prawdy" naukowej.

28(Feynman, Leighton and Sands 1963,
p. 1-

1;tłum. R.Gajewski)

29</td>
30<td><img src="T3.jpg" border="1"></td>
31</tr>
32</table>

33<table align="center" border=0 width="90%">
34<tr>
35<td>

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

36
37

Głównym celem Pracowni jest zapoznanie studentów z technikami

eksperymentalnymi stosowanymi w różnych działach fizyki poprzez umożliwienie

im samodzielnego wykonania pomiarów, opracowania i zinterpretowania wyników.
38
39
40Studenci w

ykonują pod opieką asystentów doświadczenia z czterech

podstawowych działów: optyki, fizyki ciała stałego, fizyki jądrowej i fizyki cząstek
elementarnych. Ćwiczenia wykonywane są indywidualnie. Czas wykonania
ćwiczenia wynosi od dwóch do czterech tygodni. Na zakończenie ćwiczenia
studenci przygotowują opisy, które mają formę doniesienia naukowego. Ocena
końcowa uwzględnia wszystkie elementy ćwiczenia

kolokwium wstępne, część

doświadczalną, opis i rozmowę końcową.

41
42</td>
43</tr>
44</table>
45</BODY>
46</HTML>

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

DODATEK A3

0 spis.html

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
2<HTML>
3<HEAD>
4 <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-
2">
5 <META NAME="Author" CONTENT="Marcin Mazurek">
6 <META HTTP-EQUIV="Content-Language" CONTENT="pl">

7 <TITLE>Spis treści</TITLE>

8</HEAD>
9<STYLE TYPE="text/css">
10
13</STYLE>
14<BODY BGCOLOR="#5080b0" LINK="#ffffff" VLINK="ffffff" ALINK="ffffff">
15<a TARGET="_blank" href="http://www.fuw.edu.pl"><IMG

SRC="fizyka.gif" border="0" ALT="Strona Wydziału Fizyki"></A>

16<hr width="80%" align="center" color="ffffff"> 
17<A TARGET="strona" HREF="home.html">Strona

główna</A>

18<A TARGET="strona"

HREF="ogloszenia.html">Ogłoszenia</A>

19<A TARGET="strona" HREF="wykaz-cwiczen.html">Wykaz i instrukcje do

ćwiczeń</A>

20<A TARGET="strona" HREF="plan-

zajec.html">Rozkład

zajęć</A>

21<A TARGET="strona" HREF="lista-pracownikow.html">Lista osób

prowadzących ćwiczenia</A>

22<A TARGET="strona" HREF="wskazowki-opis.html">Wskazówki dla
studentów</A> 
23<A TARGET="strona" HREF="regulamin-pracowni.html">Regulamin
pracowni</A> 
24<A TARGET="strona" HREF="zasady.html">Zasady bezpiecznej
pracy</A> 
25<A TARGET="strona" HREF="lasery-BHP.html">Instrukcja BHP przy pracy
z laserami</A> 
26<A TARGET="strona" HREF="lasery.html">Klasyfikacja
laserów</A> 
27<A TARGET="strona" HREF="stale-

fizyczne.html">Stałe

fizyczne</A> 
28<A TARGET="strona" HREF="linki.html">Linki</A> 
29
30<hr width="80%" align="center" color="ffffff">

Opracowanie strony WWW dla II Pracowni Fizycznej Wydziału Fizyki Uniwersytetu Warszawskiego

31<a TARGET="_blank" href="http://www.uw.edu.pl"><IMG
SRC="uniwerek.gif" border="0" ALT="Uniwersytet Warszawski"></A>
32autor:<A
TARGET="_blank" HREF="http://www.marcinmazurek.cba.pl"> Marcin
Mazurek</A> 
33</BODY>
34</HTML>