Serwer WWW

Każdy komputer podłączony do sieci Internet jest jej częścią. Posiada swój własny adres, który nazywa się adresem IP. Podobnie jak każda osoba na Ziemi posiada swój adres, który umożliwia jej zlokalizowanie, tak adres IP każdego komputera pozwala na zlokalizowanie jego miejsca w sieci.
Adres IP są to cztery liczby od 0 do 255, połączone kropkami, przykładowo -217 . 96 .115 . 92. W Internecie nie mogą istnieć komputery, które miałyby ten sam adres, gdyż nie możliwe byłoby ich rozróżnienie.
Do Internetu podłączone są również specjalne komputery, tzw. serwery. Pracują one 24 godziny na dobę, 7 dni w tygodniu. Nie są one w ogóle wyłączane. Uruchomione są na nich specjalne programy (które również nazywa się serwerami), świadczące różne usługi, np. usługę WWW, czy też usługę poczty elektronicznej. Tak jak nasz własny komputer, jeśli jest podłączony do Internetu, posiada unikalny numer JP (adres), tak te specjalne komputery także posiadają takie adresy.
Kiedy napiszemy własną stronę WWW musimy ją wysłać do takiego specjalnego komputera (serwera). Dzięki temu, nawet gdy wyłączymy nasz komputer, każdy może oglądać naszą stronę. Aby obejrzeć tak wysłaną witrynę, w swojej przeglądarce internetowej trzeba wpisać odpowiedni adres. Oczywiście specjalny program (serwer) moglibyśmy zainstalować również u siebie w domu, ale wówczas nasz komputer musiałby być cały czas włączony i być bardzo szybki, gdyż w jednym momencie, mogłoby chcieć przeczytać naszą stronę kilkaset osób. Dlatego takie rozwiązanie rzadko bywa praktykowane.
Bardzo ciężko byłoby się posługiwać adresami w postaci liczb. Dlatego wprowadzono tzw. domeny.

Domena jest to nazwa składająca się z kilku członów oddzielonych kropką. Przykładowo domena www.google.pl. Składa się z trzech członów: www, google i pi.
W Internecie uruchomione są jeszcze inne specjalne komputery, tzw. serwery DNS. Te komputery są jakby książkami telefonicznymi. Każdej domenie (a więc nazwie słownej) przypisane są tam odpowiednie adresy IP (liczby).

Posted in CSS
Rysunki

Częstym błędem nowicjuszy jest nadużywanie grafiki. Pisząc własne strony trzeba mieć zawsze na uwadze, że w Polsce (i nie tylko) znaczna część społeczeństwa łączy się z Internetem poprzez modemy lub inne wolne łącza. Połączenie z ich wykorzystaniem jest zawodne i wolne. Im więcej bajtów zajmuje strona z rysunkami, tym dłużej się ona ściąga i tym drożej kosztuje to czytelnika. Twój przeciętny dokument HTML zajmować będzie około 2-5 KB. To mało. Jednak jeden rysunek, który umieścisz na stronie bardzo często zajmować będzie dużo więcej. Dobrze by było, gdyby Twoje pojedyncze strony wraz z całą grafiką, która się na nich wyświetla, nie przekraczały 80 KB.

Umieszczając rysunki na swojej stronie pamiętaj o następujących zasadach:
=>   Nie pomniejszaj rysunków argumentami width i height tylko fizycznie w programie graficznym.
=>  Umieszczaj zawsze argument alt informujący co jest na rysunku (jeśli jest to ważna informacja) lub zawierającym puste cudzysłowy.

Posted in CSS
Działanie arkusza stylów CSS

Poniżej przedstawiłem działający arkusz stylów CSS z rzeczywistej, stworzonej przezemnie strony internetowej. Na jego podstawie chciałbym omówić zasadę działania CSSa. Obecnie preferuje się zamieszczanie arkuszy stylów w zewnętrznym pliku .css i dołączanie ich do głównego dokumentu strony, tak jak przedstawiono to poniżej:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”> <html xmlns=”http://www.w3.org/1999/xhtml”>
<head>

<title>Gospodarstwo gościnne “POD DZIKĄ ROŻĄ” – Noclegi Baligród</title>

<meta name=”keywords” content=”noclegi Baligród – noclegi w Baligrodzie – nocleg, pokoje gościnne – pod dzika roza”/>

<meta name=”description” content=”noclegi Baligród – noclegi w Baligrodzie – nocleg, pokoje gościnne – pod dzika roza”/>

<link rel=”stylesheet” rev=”stylesheet” href=”baligrodcss.css”/>

<script type=”text/javascript” language=”Javascript” src=”menup.js”>

</script> </head>

<body>

Sam dokument z arkuszami stylów ma następującą postać. Kursywą zaznaczyłem faktyczną treść dokumentu CSSowego, natomiast kolorem niebieskim komentuje co dana linijka robi.

body { – dany styl odnosi się do całego element body
background-color: #CC5; – ustawienie koloru tła, na jasnooliwkowy color: #black; – kolor tekstu ustawiono na czarny
margin-left: 1.3cm; – margines lewy ma rozmiar 1,3 cm
margin-right: 1.3cm; – podobnie wygląda sprawa z marginesem prawym

}

p { – tutaj odwołujemy się do akapitów, czyli elementów oznaczonych w kodzie strony jako p
text-align: justify; – tekst wewnątrz akapitu jest wyśrodkowany (wyjustowany) margin-left: 7%; – lewy margines stanowi 7% całej szerokości strony

margin-right: 7%; – prawy margines również 7% całej szerokości }

p:first-letter { – odwołanie się do pierwszej litery (bądź pierwszego znaku) akapitu font-weight: bold; – waga czcionki jest bold, czyli mówiąc po normalnemu stosujemy pogrubienie
}

H1 { – odwołanie się do nagłówka H1 color: #008000; – ustawienie koloru

text-align: center; – wycentrowanie tekstu

font-size: 25px; – ustawienie rozmiaru czcionki na 25 pikseli }

H2 { – odwołanie się do nagłówka H2 color:chocolate; – kolor ustawiamy na czekoladowy text-align: center;
font-size: 18px;

}

#stopka { – odwołanie się do element o id stopka, który zamieściłem poniżej text-align: center;

font-size: 13px;

font-style: italic; – tekst pisany kursywą }

<p id=”stopka”> <BR><BR>

&copy;2009-2010 </p>

div { – odwołanie się do wszystkich akapitów bez konkretnej nazwy margin-bottom: 3px; – margines dolny ustawiony na 3 piksele width: 180px; – szerokość akapitu to 180 pikseli
background-color: #CF3;

float: left; – tak zwane ‘pływanie elementu’ ustawione na lewo, czyli element div znajduje się po lewej stronie całości, opływa całość z lewej strony
}

div2 { – odwołenie się do akapitów div2 margin-bottom: 20px;
float: center; – element znajduje się w środku całości text-align: center; – wyśrodkowanie tekstu

}

ul.menu li { – odwołwanie się do element li w pozycji menu font: 12px arial, helvetica, sans-serif; – ustawienia czcionki padding-left: 10px; – lewe dopełnienei ustawione na 10 pikseli

}

Posted in CSS
Osadzanie arkuszy stylów na stronie

Istnieją dwa rodzaje osadzania stylów CSS w dokumencie internetowym czyli na stronie WWW. Kaskadowy arkusz stylów można umieścić albo wewnątrz konkretnego dokumentu, albo też dołączyć go do strony z osobnego pliku. Pierwsze rozwiązanie to tzw. style wewnętrzne – stosowane jest do prostych stron internetowych, z małą liczbą elementów których wygląd chcemy kształtować za pomocą CSSa. Natomiast drugie rozwiązanie – style zewnętrzne – jest rozwiązaniem dedykowanym do większych projektów.
Style wewnętrzne:
• Styl lokalny – umieszcza się go wewnątrz konkretnego znacznika formatowanego
elementu. Działanie stylu obejmuje tylko ten jeden, konkretny element.
<p style=”color:green; font-size:14px; font-variant: small-caps;”> Treść akapitu </p>
• Styl zagnieżdzony – umieszcza się go w nagłówku strony WWW. Swoim
działaniem obejmuje cały dokument, a nie tylko pojedyncze elementy.
<html> <head>

<style type=”text/css”> P
{
color:green; font-size:14px; font-variant: small-caps;
} </style>
</head>
<body> Treść strony
<p> Treść akapitu do którego odnosi się styl CSS </p> </body> </html>
• Styl zewnętrzny – umieszczany jest w zewnętrznym pliku o rozszerzeniu .css. Oczywiście plik ten powinien być  umieszczony w tym samym katalogu co projektowany dokument internetowy. W nagłówku strony WWW umieszczany jest odnośnik do arkusza CSS.
<html>
<head>
<link href=”arkusz.css” rel=”stylesheet” type=”text/css” >
</head>
<body> Treść strony
<p> Treść akapitu do którego odnosi się styl CSS </p> </body> </html>
Natomiast sam dokument .css jest zwykłym plikiem tekstowym, w którym zapisano reguły wyglądu (prezentacji) strony WWW. Ważne jest jednak aby miał on odpowiednie rozszerzenie, np. możemy nazywać go arkusz.css bądź style.css!

 

Posted in CSS
Background color

Ustawianie koloru tła

Kolor tła (po angielsku background color) ustawniane są w arkuszach CSS dla wszsytkich elementów. W poniższym przykładzie ustawmy kolor tła dla całego elementu <body>:

BODY {background-color:#FF6666;}
Posted in CSS