Kartografia internetowa

Ćwiczenie 1 - Podstawy LINUXA i HTML

Konta użytkowników  Wirtualne pulpity  System plików  Terminal  Serwer Apache 

Zadanie 1  Podstawy HTML  Szkielet strony  Podstawowe znaczniki  Zadanie 2 

Konta użytkownika

Podobnie jak w innych systemach na jednym komputerze może pracować kilka osób korzystających z indywidualnych kont użytkownika. W przypadku pracowni komputerowej są to konta lokalne, zatem możliwe jest współistnienie w ramach danej pracowni kont o tej samej nazwie.

Każda z grup powinna utworzyć konta o nazwie kartografiaX (gdzie X jest numerem grupy) z hasłem o identycznym brzmieniu. Oba słowa muszą rozpoczynać się z małej litery. W tym celu należy:

Wirtualne pulpity

Linux pozwala na wykorzystanie w trakcie pracy tzw. wirtualnych pulpitów na których można umieszczać poszczególne okna uruchomionych programów. Maksymalna ilość pulpitów zależna jest od konkretnej dystrybucji Linuxa. W UBUNTU standardowo dostępne są 4.

Ikony służące do ich przełączania znajdują się w lewej część dolnego paska zadań. Ten sam cel można osiągnąć używając skrótu klawiszowego CTRL+ALT+strzałka w prawo lub lewo

System plików

W Linuxie wszystkie partycje, urządzenia i pliki zintegrowane są w jedno wspólne drzewo katalogów tzw. "root". Poniżej podstawowe informacje na temat systemu plików.

root
Katalog główny oznaczany przez ukośnik "/ "
/home/login/
Katalog użytkownika. Ścieżka dostępu może być zastąpiona poprzez $HOME lub tyldę "~"czyli przykładowo "~/mój katalog" to inaczej "/home/login/mój katalog".

Opis innych ważnych katalogów można znaleźć tutaj.

Uprawnienia do poszczególnych katalogów i plików przyznawane są osobno dla właściciela, grupy i tzw. innych użytkowników. Należy pamiętać, że serwer www należy do tej ostatniej grupy zatem wszelkie pliki potrzebne do wyświetlenia strony powinny mieć odpowiednio zmienione uprawnienia. W UBUNTU do wykonywania niektórych operacji np. w katalogach systemowych potrzebne są uprawnienia administratora systemu (root). W takim przypadku należy posłużyć się terminalem (patrz niżej) oraz poleceniem sudo.

Terminal

Oprócz interfejsu graficznego wszystkie operacje można wykonywać za pomocą terminalu, są też polecenia mogące być wykonane wyłącznie w ten sposób. Terminal to interfejs powłoki (shell) służącej do wprowadzania i interpretowania poleceń tekstowych. Uruchomić go można poprzez menu Aplikacje/Akcesoria/Terminal. W terminalu powita nas coś takiego:

login@nazwa_serwera: bieżący_katalog$ czyli przykładowo kartografia1@student: ~$

gdzie $ to znak zachęty oznacząjący gotowość do przyjmowania poleceń, a ~ to znak katalogu domowego użytkownika. Polecania wpisuje się po znaku zachęty a ich opcje muszą być poprzedzone myślnikiem (lub dwoma, w zależności od polecenia) i oddzielone spacją np.

ls -l a w przypadku kilku opcji wpisywane są one w taki sposób ls -laB

Wiekszość poleceń posiada bardzo rozbudowanę listę opcji i parametrów. Poznać ja można dodając do polecenia parametr --help. Najważniejsze polecenia zawarte są w poniższym wykazie:

cd nazwa_katalogu
Zmiana katalogu na podany np. "cd /var/www/"
cd ..
Zmiana katalogu na wyższy
ls
Wyświetla listę plików w bieżącym katalogu. Po dodaniu parametru " -l " lista zawiera oprócz samych nazw podstawowe informacje o plikach
ln ścieżka_dostępu nazwa_linku
Tworzy w bieżącym katalogu link o dowolnej nazwie do podanej ścieżki dostępu. Dodanie parametru " -s " spowoduje utworzenie tzw. linku symbolicznego
sudo
Jedno z niezbędnych poleceń, którego nazwa pochodzi od " superuser do ". Może być dodane przed dowolną inną komendą i pozwala na wykonanie jej z uprawnieniami administratora. Wymaga podania swojego hasła
su nazwa_ użytkownika
Przełączenie użytkownika

Serwer Apache

Na zajęciach wykorzystywany będzie najpopularniejszy obecnie serwer www Apache, tworzący jedną z podstaw środowiska LAMP (Linux, Apache, MySQL, PHP/Perl/Python). Informacje, dokumentacje oraz wersje instalacyjne można uzyskać tutaj, na stronie Apache HTTP Server Project.

Przy pomocy zainstalowanego lokalnie Apache możliwe jest między innymi testowanie stron wykorzystujących procesy zachodzące normalnie po stronie serwera www (PHP, skrypty CGI). Wpisując w przeglądarce:

http://localhost/

odwołujemy się do adresu IP lokalnego komputera czyli 127.0.0.1. Komunikacja z tym adresem oznacza wymianę informacji w obrebie jednego hosta. W przypadku standardowej instalacji Apache w ramach Ubuntu wywołanie wyżej wymienionego spowoduje, że serwer wyświetli stronę

index.html

znajdującą się w katalogu

/var/www/

(jest to tzw. Document Root serwera) lub listę znajdujących sie tam katalogów i plików w przypadku jej braku. Jednak aby móc zmieniać zawartość tego folderu potrzebne są uprawnienia administratora, co w przypadku współkorzystania z systemu wielu użytkowników nie jest rozwiązaniem ani wygodnym ani bezpiecznym. Z pomocą przychodzi właściwa linuxowi możliwość tworzenie symlinków czyli linków symbolicznych. Podstawową różnicą w przypadku Apache jest fakt, że taki link posiada własną ścieżkę dostępu. Możemy w ten sposób pracować nad stroną w dowolnym katalogu a serwer www będzie się z nią komunikował poprzez link symboliczny umieszczony w /var/www/.

ZADANIE 1. Korzystając z powyższych informacji utwórz w swoim katalogu użytkownika katolog htdocs. Następnie przekopiuj do niego i rozpakuj plik Tutorial znajdujący się pod adresem /home/data/. Następnie w katalogu /var/www/ utwórz link symboliczny o nazwie KartografiaX. W przeglądarce otwórz plik index.html korzystając z własnego serwera.

Podstawy HTML

Aby unaocznić efekty działania Mapservera potrzebne są chociaż podstawowe umiejętności i wiadomości związane z budową stron www oraz językiem HTML (Hypertext Markup Language).

Plik HTML jest zwyczajnym plikiem tekstowym, różniącym się jedynie zastosowanie odpowiedniego rozszerzenia (.html, możliwe są jednak i inne np. .htm lub .php), który następnie jest odpowiednio interpretowany przez przeglądarke. Podstawą języką są tzw. znaczniki (tagi) czyli ciągi znaków objęte nawiasami ostrymi, przykładowo tutuł tego rozdziału wyglądą następująco:

<h3>Podstawy HTML</h3>
gdzie h3 oznacza tytuł trzeciego rzędu. <h3> jest to tzw. znacznik otwierający a </h3> znacznik zamykający. W ramach tego pierwszego istnieje ponadto możliwość dodawania różnego rodzaju parametrów np.
<h3 name="rozdzial1" >
nadaje temu znacznikowi etykietę "rozdzial1", do której można się później odwoływac w ramach dokumentu za pomocą odsyłaczy

Przy konstruowaniu stron warto przestrzegać kilku zasad:

  1. W obrębie znaczników należy używać małych liter
  2. Należy zamykać znaczniki
  3. Wartości parametrów powinny znajdować się w cudzysłowiu
  4. Znaczniki należy zamykać w takiej samej kolejności w jakiej zostały otwarte
  5. Najlepiej i najbezpieczniej jest używać aktulnej składni według wersji Strict, czyli stosując przytoczone zasady, bez wycofanych znaczników, ramek i wykorzystując style CSS
  6. W przypadku większych i bardziej skomplikowanych stron dobrze jest stosować komentarze za pomocą znaku <!--

Szkielet strony

Kod HTML winien być zamknięty w pewnych ramach tzw. szkielecie strony. Jest to zestaw znaczników wewnątrz których znajduje się właściwa treść strony. Wygląda on w poniższy sposób:

<html>
<head>
Tutaj znajduje się treść nagłówka strony
</head>
<body>
Ta część zawiera właściwą treść strony
</body>
</html>

Wysoce wskazane jest umieszczenie dodatkowo trzech informacji: prolou, czyli definicji typu dokumentu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
prolog należy umieścić bezpośrednio przed pierwszym znacznikiem czyli <html>, duże litery są konieczne. Deklaracja wygląda nieco inaczej w przypadku stosowania mniej restrykcyjnych typów czyli Transitional i Frameset.

informacji o kodowaniu znaków:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
powinna się znaleźć w nagłówku strony. Można stosować również kodowanie "iso-8859-2", natomiast 'Windows-1250" jest nie zalecane.

oraz tytułu strony np.

<title>Jakiś tytuł</title>
zaleca się umieszczenie go na samym początku nagłówka strony

Podstawowe znaczniki

Poniżej podstawowe tagi języka HTML wraz z niezbędnymi parametrami (w rzeczywistości można dodać ich znacznie więcej).

<p>
znacznik akapitu
<h1><h2><h3><h4><h5><h6>
tytuły, różniące się wielkością znaków oraz a może nawet przede wszystkim miejscem w hierarchii
<strong>
tekst zawarty w jego obrębie jest pogrubiany
<em>
emfaza, tekst zawarty w jego obrebie jest pochylony
<a href="adres strony internetowej">tekst lub obrazek</a>
odsyła pod wskazany adres www
<img src="nazwa pliku obrazka">
wyświetla obraz z danego pliku, adres ustalany jest w relacji do strony
ZADANIE 2. Załóż katalog ~/htdocs/kartografia W nim utwórz plik index.html zawierający wszystkie niezbędne znaczniki. Strona powinna zawierać tekst, link do dowolnej strony, dowolny ściągnięty z internetu obrazek oraz obrazek będący odsyłaczem do dowolnej strony.