Geoinformacja w sieciach komputerowych

Ćwiczenie 1 - Trochę o serwerze Apache, HTML i CSS

Serwer Apache  Podstawy HTML  Szkielet strony  Podstawowe znaczniki 

Zadanie 1  Arkusze stylów CSS  Selektory CSS  Zadanie 2 

Serwer Apache

Na zajęciach wykorzystywany będzie najpopularniejszy obecnie serwer www czyli Apache. Informacje, dokumentacje oraz wersje instalacyjne można uzyskać na stronie Apache HTTP Server Project, pod adresem http://httpd.apache.org.

Posiadanie dostępu do zainstalowanego lokalnie lub zdalnie serwera Apache jest niemal niezbędne przy tworzeniu zaawansowanych portali internetowych między innymi z uwagi na możliwość testowanie stron wykorzystujących procesy zachodzące po stronie serwera www ("server side scripting" - PHP, skrypty CGI). Wpisując w przeglądarce adres:

http://localhost

(lub samo localhost) odwołujemy się do lokalnego adresu IP czyli 127.0.0.1. Po jego wywołaniu serwer wyświetli plik index.* (.html, .php itd.) znajdujący się w katalogu głównym serwera (Document Root) lub całą jego zawartość w przypadku gdy nie znajdzie pliku index i jest do tego uprawniony. Jeśli instalacja Apacha została przeprowadzona standardowo (np. przy pomocy pakietu MS4W) najprawdopodobniej katalogiem głównym jest ../Apache/htdocs (Czyli w przypadku MS4W - C:/ms4w/Apache/htdocs).

Dodatkowo, jeśli komputer podłączony jest do internetu i reguły zapory ogniowej na to pozwalają, strony umieszczone na serwerze dostępne są poprzez jego zewnętrzny adres IP, zastępujący 127.0.0.1. Z uwagi na bezpieczeństwo Apache umożliwia dostęp z zewnątrz tylko do Document Root a sam jest uprawniony do korzystania z plików również w Server Root (z reguły stopień wyżej np. C:/ms4w/Apache). Poznanie adresu umożliwia między innymi polecenie

ipconfig /all

Podstawy HTML

Poniżej podstawowe informacje na temat HTML (Hypertext Markup Language). Znacznie więcej można znaleźć pod linkami do odpowiednich kursów na stronie głównej.

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 tytuł 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 id="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: prologu, 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 1. Korzystając z powyższych informacji utwórz dostępny poprzez internet folder o dowolnej nazwie (pamiętając, iż będzie on częścią ścieżki dostępu zatem wskazane jest unikanie białych spacji i polskich znaków) zawierajacy plik html ze stroną internetową, na której obecne są minimum: dwa rodzaje nagłówków, dwa paragrafy, link tekstowy do zasobu lokalnego, link do zewnętrznej strony, obrazek i obrazek będący linkiem do dowolnego zasobu. Ponadto przedstaw adres stworzonej przez Ciebie strony prowadzącemu.

CSS - Kaskadowe arkusze stylów.

W skrócie - CSS to specjalny język określający sposób formatowania elementów strony (i nie tylko, o czym poźniej) i umożliwiający oddzielenie struktury od sposobu jej prezentacji.

Trochę szerzej - podstawowy element języka CSS wygląd następująco:


cecha: wartość;

czyli na przykład:

color: yellow; 

natomiast selekcji stylów, czyli przydzielania ich do konkretnych elementów można dokonać na trzy sposoby:

  • Styl lokalny - nadaje formatowanie konkretnemu, pojedynczemu elementowi strony (możliwe jest też nadanie lokalnego stylu kilku elementom naraz jeśli znajdują się one wewnątrz elementu liniowego <span> lub blokowego <div>), innymi słowy style jako atrybut elementu html np:
<p style="color: black; background-color:yellow;">
  • Wewnętrzny arkusz stylów - na początku dokumentu (pomiędzy znacznikami <head>)określone są style wraz z selektorami, obowiązujące dla całości dokumentu, innymi słowy style jako element html. Czyli jeśli w nagłówku strony znajduje się arkusz stylów o następującej treści:
<head>
<style type="text/css">
/* <![CDATA[ */
h1 { margin-top: 10px; color: yellow; background-color:#00000; }
p  { text-indent: 30px; color: black; font-size: 12px; }
/* ]]< */
</style>
</head>

to każdy nagłówek pierwszego poziomu (mówi nam o tym selektor elementu h1) zostanie wyświetlony z marginesem górnym wynoszącym 10 pikseli, w kolorze żółtym na czarnym tle.

  • Zewnętrzny arkusz stylów - style jako oddzielny dokument. Zdecydowanie najlepszy wybór, pozwalający w łatwy sposób zastosować jeden zestaw stylów dla kilku różnych stron oraz oddzielający warstwę prezentacji od treści strony. W nagłówku podajemy jedynie lokalizacja arkusza:
<head>
	<link rel="Stylesheet" type="text/css" href="nazwa_arkusza_stylów.css" />
</head>

natomiast sam arkusz jest zwykłym plikem tekstowym z rozszerzeniem *.css o następującej budowie:

body
{
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #003868;
	background-color: #80B8E8;
	margin:0px;
}
h1 
{ 
	margin-top: 10px; 
	color: yellow; 
	background-color:#00000; }
p
{
	text-align: justify;
	text-indent: 30px; 
	color: black; 
	font-size: 12px;
}


Selektory CSS

W przypadku korzystania z zewnętrznego arkusza stylów przydzielane są one za pomocą tzw. selektorów. Szerzej o ich typach i regułach używania można przeczytać na stronie kursu html, natomiast podstawowe rodzaje to:

selektor typu
może nim być praktycznie dowolny element HTML np:
p
{
	color: red; 
	font-size: 12px;
}
obejmuje wszystkie paragrafy
selektor klasy
obejmuje wszystkie elementy z nadaną klasą o tej samej nazwie, czyli:
.przykladowa_klasa
{
   color: red;
   font-size: 12px;
}
dotyczy na przykład:
<p class="przykladowa_klasa">Lorem ipsum...</p>
oraz wszystkich elementów wewnątrz:
<div class="przykladowa_klasa"></div>
selektor identyfikatora
dotyczy konkretnego elementu jednoznacznie określonego za pomoca identyfikatora, czyli"
#lewa_ramka
{
	color: red; 
	font-size: 12px;
}
zmienia styl tylko i wyłącznie elementów wewnątrz bloku:
<div id="lewa_ramka"></div>
ZADANIE 2. Do utworzonej uprzednio strony dodaj zewnętrzny arkusz stylów. Zamknij w elementach blokowych osobno tekst, obrazki i część naglówkową strony jeśli jest obecna (bloków może być więcej ale minimalnie dwa). Opatrz osobnymi stylami (zawierającymi co najmniej dwie cechy) dwa paragrafy oraz nagłowki przy użyciu dowolnych selektorów (co najmniej dwa rodzaje).

Autor: Michał Rzeszewski, Instytut Geokologii i Geoinformacji, UAM Poznań, mail: mrzeszewski@gmail.com
Creative Commons License
Ten utwór jest dostępny na licencji Creative Commons Uznanie autorstwa-Użycie niekomercyjne-Na tych samych warunkach 2.5 Polska.