lampa lampaMelbrinionersteldregandiszfeltselior


Wejście  --»»  Idee naukowe --»» Reklamowanie stron WWW









































Reklamowanie stron WWW
Część I   Tworzenie stron WWW
Część II   Reklamowanie stron WWW
Dodatek:   Pływające menu
Przystawka: Menu wegetariańskie
Krótki kurs dla początkujących, jak zabrać się do budowania i projektowania własnej strony WWW. Absolutne podstawy. Najtańszym kosztem.

Tworzenie stron WWW

Witryna WWW to grupa stron WWW, które są po prostu plikami z rozszerzeniem .html (np. index.html). Do jej stworzenia potrzebny będzie program pozwalający zachowywać pliki w formacie HTML. Programów takich jest wiele, zresztą obecnie pozwala na to większość edytorów tekstu. Ja poleceam darmowe programy:

1. Netscape Composer
Do ściągnięcia wraz z przeglądarką Netscape Navigator (wpisujemy w Google hasło Netscape i po odnalezieniu strony wybieramy z menu opcję Downloads - niestety trzeba zajrzeć do archiwalnych wersji Archive Products i wybrać którąś ze starszych wersji, np. 7.0, bo najnowsze nie zawierają Composera). Program zawiera tylko podstawowe opcje, co jest zaletą dla początkujących.

Zalety: Proste menu, łatwe do intuicyjnego zrozumienia. Od razu widać układ graficzny strony. Można wklejać dokumenty tekstowe metodą Kopiuj (Ctrl+C)  i Wklej (Ctr+V). Polecam jednak wklejanie dokumentów zapisanych w uniwersalnym formacie RTF, a nie DOC Worda, bo formatowanie tekstu wychodzi dziwnie.

Wady: Podgląd kodu HTML jest niewygodny - jednolicie szary

2. HTML Kit
Do ściągnięcia za darmo z witryny chami.com. Opcja Download HTML-Kit. Bardzo wygodny edytor kodu jako uzupełnienie Composera. Mnóstwo opcji dla zaawansowanych.

3. Open Office
Darmowy edytor tekstu do zainstalowania pod Windows i Linuksem. Oferuje wygodny podgląd kodu i pewne możliwości graficznej edycji strony jak Composer. Do ściągnięcia z polskiej strony Open Office (lub ze strony Ux Systems) ale zapewne też można znaleźć na płytach CD dołączanych do czasopism poświęconych Linuksowi.


ORGANIZACJA WITRYNY
Wszystkie pliki html umieszczamy w jednym katalogu (np. mojawitryna). Jeśli mamy jakieś graficzne elementy dekoracji witryny można je umieścić w podkatalogu (mojawitryna/oprawa), to samo z rysunkami i zdjęciami (mojawitryna/rysunki). Jeśli plików ma być więcej, można dla uporządkowania nazywać je zaczynając pliki z tej samej grupy jednakowym przedrostkiem (np. opowiadania: opo_tytul.html)

Pierwszą stroną naszej witryny, którą zobaczy odwiedzający będzie zazwyczaj index.html - nasza strona główna, drzwi frontowe do wwitryny. Przechodzenie między stronami, np. ze strony głównej do innych stron naszej witryny lub stron w obcych witrynach umożliwiją łącza (inaczej linki).

Do innych stron naszej witryny:
<a href="nazwa_pliku.html">Tekst łącza widoczny na stronie</a>

Lub na zewnątrz do cudzych witryn WWW:
<a href="http://www.google.pl/">Tekst łącza widoczny na stronie</a>
Czerwony adres można wkleić z okna przeglądarki (Netscape, Explorera, Mozilli, etc.).

Warto też przygotować sobie plik tekstowy (np. opis.txt) z krótki opisem strony i słowami kluczowymi, który przyda się nam przy rejestrowaniu witryny w wyszukiwarkach internetowych takich jak Google.


KURS HTML
Język HTML służy do formatowania tekstu (i innych rzeczy) na stronach WWW. Kursy HTML-a można znaleźć w Internecie:
Przyjazny kurs języka HTML.
Lub kurs HTM dla webmasterów.

Tutaj tylko podstawowe informacje:
Zasadniczo plik html ma taką konstrukcję

<html>
<head>
Czołówka pliku - tu umieszczane są wszystkie informacje techniczne potrzebne programom do interpretacji strony WWW.
</head>
<body>
Ciało pliku - tu umieszczana jest właściwa zawartość strony, to co widzieć będzie użytkownik, który odwiedzi naszą stronę.
</body>
</html>

Zasada działania języka HTML jest prosta: mamy pary znaczników 1.otwierajacy (np. <html>) oraz 2. zamykający (</html>). Wszystko między nimi stosuje się do formatowania określonego przez ten znacznik (tu akurat będzie zawartością pliku html). Inne przykłady to: <b>wytłuszczenie</b>   <i>kursywa</i>. Bywają też znaczniki pojedyncze np. znacznik <br> wstawiajacy pusty wiersz. Oraz zestawy znaczników umożliwiające tworzenie tabel, formularzy, list.

Szczególnie przydatne są tabele, bowiem umożliwiają zaplanowanie układu strony.
Oczywiście trzeba pamiętać, by w znaczniku <BODY> wstawić:
 <body style="margin: 0pt;">
aby tabela organizujaca stronę nie odstawała od brzegów dokumentu.

Jak widać, same znaczniki wewnątrz mogą zawierać tzw. atrybuty pozwalające doprecyzować działanie znacznika. W przykładzie powyżej atrybutem jest style="margin: 0pt;"


UŻYTECZNE SZTUCZKI

Polskie litery
 W czołówce pliku powinien znaleźć sie znacznik
 <meta content="text/html; charset=ISO-8859-2" http-equiv="content-type">
Cyferka 2 gwarantuje polskie litery.

Łącza prowadzące do określonych sekcji strony
Jeśli chcemy odwołać się w łączu (linku) do konkretnego miejsca na stronie (tej samej lub innej), wstawiamy w tym miejscu kotwicę (named anchor, np. <a name="reklama"></a>), a w samym łączu po nazwie pliku naszej strony wstawiamy znak # a po nim nazwę kotwicy:
(np. <a href="x_reklamawww.html#reklama">Reklamowanie stron WWW</a>)

Wysyłanie maili ze strony
Jeśli chcemy umożliwić odwiedzajacym pisanie listów (e-maili) do nas lub pod dowoly inny adres poczty elektronicznej, należy użyć następującego łącza:
<a href="mailto:holygraal@epf.pl">holygraal@epf.pl</a>
Składnia, jak widać jest prosta: mailto:adres@poczty.elektronicznej (to wklejamy w okienku adresowym Composera)
W tekście łącza (niebieski) najlepiej powtórzyć adres z łącza dla wygody użytkowników.

Otwieranie obcych stron w nowym oknie
Jeśli odwołujemy się do strony z cudzej witryny dobrze jest sprawić, by otwierała się w osobnym oknie. W ten sposób ułatwimy mu powrót do naszej witryny, gdyby zgubił się w obcej witrynie. Służy do tego atrybut target:
<a href="http://www.cybra.pl" target="_blank">Cybra</a>
(W Composerze można ją znaleźć, jak większosć atrybutów, po kliknięciu opcji Advanced Edit)
Spójna i jednolita oprawa graficzna
Należy pamiętać o tym, by zachować jednolity układ graficzny (kolorystykę, rozmieszczenie elementów, itp.) na wszystkich stronach witryny. Dziękie temu odwiedzajacy będzie wiedział, czy nadal jest w naszej witrynie, czy już ją opuścił.

Łatwe nawigowanie po witrynie
Przejrzyste elementy nawigacyjne. Tak by odwiedzajacy nie miał wątpliwości, do którego miejsca w witrynie trafił i jak dostać się tam, gdzie chce. Obowiązkowe jest menu nawigacyjne na  KAŻDEJ stronie - u góry lub z boku (w ostateczności należy podać przynajmniej łącze do strony głównej). Nigdy nie wiadomo bowiem, do której z naszych stron użytkownik trafi jako pierwszy - menu po prostu pomaga mu się nie zgubić.
Oraz ścieżka z łączami, pokazująca mu pozycję w hierarchii strony:
Strona główna > Strona wymieniona w menu > Bieżąca strona
Plan nawigacyjny witryny warto sobie naszkicować przed przystąpieniem do projektowania. Im prostszy tym lepiej. Nie za dużo stron w menu (5-12). Nie za dużo poziomów w głąb (2-4). Oto przykład.

Strona główna
 Strony wymienione w menu
 Strony drugorzędne
(index.html)
 Dorobek zawodowy (dorobek.html)
 artykuly.html
pracodawcy.html

Kontakt (kontakt.html)

Hobby (hobby.html)
 opowiadania.html
szermierka.html
modelarstwo.html

Ciekawe linki (linki.html)
 muzyka.html
blogi.html

Moje CV  (cv.html)

Nalezy pamiętac, aby na starcie przygotować listę stron z menu (5-12) i porządnie się nad nią zastanowić, bo późniejsza jej zmiana będzie wymagać pracochłonnego przerabiania całej witryny.

W naszej prostej witrynie nie powinno być też więcej niż 20-50 plików HTML (osobnych stron), bo większa liczba jest nie do ogarnięcia i wymaga skorzystania z bardziej zaawansowanych narzędzi.

Zwięzły i optycznie czytelny tekst
Pisząc tekst do witryny należy pamiętać, że ludzie szybciej się męczą i nudzą czytając w Internecie. Dlatego należy:

  • pisać krótkie akapity,
  • tam gdzie się tylko da używać numerowanych list i wypunktowań,
  • ograniczyć lanie wody,
  • nie zmuszać czytelnika do przewijania długich tekstów
  • wyróżniać optycznie kluczowe informacje


Formaty obrazków
Do obrazków na stronie (oraz jako oprawy graficznej) używamy plików:

  • JPG -zdjęcia, obrazki złożone
  • GIF - proste rysunki, schematy o skromnej kolorystyce (kilkanaście kolorów) i dużych jednolitych płaszczyznach.
Im mniejsze tym lepiej, bo strona się szybciej załaduje. Jest kilka trików ułatwiających życie odwiedzajacym: miniaturki, umieszcanie dużych plików na osobnych stronach (przy łaczach do nich podajemy ostrzeżenie, jak duży będzie plik), itp.

Polecam książki:
Niestety sam nie zawsze się stosuję, jak widać.

SERWERY DARMOWYCH WITRYN
Ponieważ ma być tanio, nie piszę jak postawić stronę WWW na własnym komputerze. To wymaga stałego adresu IP, kupna nazwy domeny, etc. Aczkolwiek samo postawiewie witryny sprowadza sie do skopiowania plików do odpowiedniego katalogu serwera WWW (np. httpdocs dla darmowego serwera Apache).

Obecnie za darmo można mieć założyć sobie w Internecie sensownych rozmiarów małą witrynę (10-50 MB), pod warunkiem, że nie przeszkadzają nam reklamy. Zastanówcie się, jaki będzie w sumie rozmiar plików graficznych w witrynie. W ostatecznosci zawsze można założyć 2-3 witryny połaczone łączami w jedną, ale komplikuje to administrowanie.

Ota lista paru serwerów za granicą (opcje darmowe = FREE Web Hosting):
Oraz lista polskich darmowych serwerów WWW.

Generalnie wiekszośc oferuje wygodne szablony dla osób, którym nie chce się projektować strony.

Umieszczenie strony na serwerze sprowadza się do:
  • albo do kliknięcia odpowiednich opcji w witrynie dostawcy serwera i skopiowania naszych plików do właściwego katalogu (załaduj, upload)
  • albo do przesłania plików za pomocą programu FTP. W programie wpisujemy podany nam przez dostawcę serwera adres FTP, nazwę naszego konta i hasło i wysyłamy. Można wysyłać przez przeglądarkę internetową lub specjalny program-klienta FTP (Ja używam programu WS_FTP LE).

SZABLON
Większość serwerów stron WWW i programów do tworzenia stron HTML (WWW) oferuje gotowe strony, ale dla tych, którzy nie chcą lub nie mogą z nich korzystać oto najbardziej podstawowy szablon strony WWW:

<html>

<head>
<title>Tu wpisz tytuł strony</title>
<meta name="Author" content="Tu wpisz autora strony">
<meta name="description" content="Tu wpisz opis strony">
<meta name="keywords" content="Tu, wpisuj, słowa, kluczowe">
<meta name="revisit" content="14 days">
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-2">

<script language="JavaScript">
<!-- Ten skrypt będzie niewidoczny dla starszych przeglądarek.
if (parent.location != window.location) {
parent.location = window.location;
}
// koniec skryptu. -->
</script>

</head>
<body style="margin: 0pt;">
<table style="width: 100%; text-align: left;" border="1" cellpadding="8"
cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 180px;">Logo/tytuł strony<br>
</td>
<td style="vertical-align: top;">Tu wstaw ścieżkę nawigacyjną<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 180px;">

<--! Tabela menu -->
<table style="width: 100%; text-align: left;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">Łącze menu 1<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 3</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 4</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 5</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 6</td>
</tr>
</tbody>
</table>
<--! Koniec tabeli menu -->

</td>
<td style="vertical-align: top;">
Tu wpisz/wstaw treść strony
<br>

</td>
</tr>
</tbody>
</table>

</body>

</html>

Oczywiście kolory tła tabeli i komórek, oraz ich ustawienia (czerokości, odstępy, grubości obramowania) można zmieniać według własnego gustu. Ze wspomnianych wcześniej programów najłatwiej robi się to pod Composerem.

Góra strony

Reklamowanie stron WWW

Kilka podstawowych porad, co zrobić, by waszą stronę odwiedzano.

RADA 1: Słowa kluczowe
Przede wszystkim najważniejsze są słowa kluczowe, których roboty (małe programy wędrujące po sieci) i zajmujące się klasyfikacją stron używają do katalogowania stron WWW.

Do ich definiowania służy znacznik
<meta name="keywords" content="von Suchner, Suchner, hodowca, pies">
umieszczany w czołówce strony tzn. między znacznikami <head> i </head> 

Roboty każdej wyszukiwarki działają trochę inaczej i są ciągle przerabiane, wiec nie ma ścisłych zaleceń, jak przygotowywać słowa kluczowe. Ale jest kilka podstawowych reguł.
  1. Słowo kluczowe powinno występować często w tekście strony (min. 2-3 razy na stronie), ale nie za często, bo robot zacznie podejrzewać oszustwo (analiza statystyczna). Najlepiej po prostu napisać zwykły tekst na temat używając słowa kluczowego o 25% częściej niż używalibyście go w rzeczywistości.
  2. Słowa kluczowe powinny być dostosowane do sposobu myślenia klienta. Jakie słowa wy byście wpisali w Google, gdybyście chcieli znaleźć stronę taką jak wasza?
  3. W krótkich stronach słowa kluczowe stanowią większy procent zawartości strony, więc krótkie strony będa zazwyczaj wyżej w rankingach.
  4. Warto mieć coś co odróżnia waszą witrynę od innych: np. kilkunastoakapitowy tekst na temat karmienia hovawartów, jeśli takiego nie ma w Internecie. Albo stronę o historii rasy, albo coś w ten deseń. Taka strona jest „wabikiem”. Oczywiście strona o seksie hovawartów raczej nie zadziała, bo utonie w morzu innych stron używających słowa kluczowego sex.

Oprócz tego jest kilka znaczników, które są powiązane ze słowami kluczowymi: (patrz http://www.i18nguy.com/markup/metatags.html). Najważniejsze to:

Opis strony:
<meta name="description" content="Rodzinna hodowla hovawartów von Suagra...">
2-3 zdania, w których warto powtórzyć parę razy wybrane słowa kluczowe.

Polecenie ponownego odwiedzania strony
<meta name="revisit" content="14 days">
Jeśli zamierzacie co jakiś czas modyfikować stronę, to warto przypomnieć robotom, aby stale do was zaglądały

Te powyżej wstawia się w czołówce strony tzn. między znacznikami <head> i </head>, poniżej znaczniki wstawiane w treści strony między <body> a </body>.

Atrybut ALT obrazków
Warto też zadbać o alternatywne opisy rysunków i zdjęć (których nie macie) - niech tam też pojawią się słowa kluczowe, zamiast:
<IMG HEIGHT="110" SRC="darsy2.jpg" WIDTH="190" BORDER="0">
dodajcie opis:
<IMG ALT=”pies rasy hovawart, Darcy, z hodowli rodziny Suchner, zdjęcie” HEIGHT="110" SRC="darsy2.jpg" WIDTH="190" BORDER="0">
pewnie znajdziecie możliwość dodania opisu rysunku w atrybutach obrazka w waszym programie do edycji stron (atrybut ALT lub „alternatywny tekst”- alternate text w Composerze)

Nagłówki tekstu
Warto też pamiętać o powtarzaniu słów kluczowych w nagłówkach organizujących tekst na stronie (np. <H1>Rasa hovawart</H1>).

RADA 2: Nie używać ramek <frames>
Roboty nie trawią ramek <FRAMES> - po prostu traktują stronę zbudowaną z raamek jako kilka stron i głupieją podczas indeksowania - strona spada w rankingu nawet o kilkanaście pozycji. Dlatego lepiej organizować stronę za pomocą tabel (patrz przykład poniżej). Niestety boczne menu nie będzie wtedy cały czas widoczne przy przewijaniu w dół, ale coś za coś. (Chyba, że skorzystacie z pływajacego menu)

Logo/Tytuł
 strona główna--»bieżąca strona
łącze menu 1
łącze menu 2
łącze menu 3
łącze menu 4
łącze menu 5
łącze menu 6

 Treść naszej strony

Oczywiście trzeba pamiętać, by w <BODY>
wstawić <body style="margin: 0pt;">, aby tabela nie odstawała od brzegów.

Warto też w między <head></head> wstawić skrypt:
<SCRIPT language="JavaScript">
<!-- Poniższy skrypt będzie niewidoczny dla starszych przeglądarek.
if (parent.location != window.location) {
parent.location = window.location;
}
// koniec skryptu. -->
który uniemożliwi innym witrynom podkradanie waszej strony do własnych witryn z ramkami. Niestety czasami potrafi on zakłócić działanie strony (np. tej w witrynie Geocities - blokuję działanie opcji "Wstecz"), jeśli nasz dostawca serwera WWW używa ramek.


RADA 3: Niech was cytują
Google (i inne wyszukiwarki) liczy też łącza odwołujące się do waszych stron, więc możecie zrobić następujące rzeczy:

  1. Wymieniać się łączami do stron ze znajomymi (oni umieszczą łącze do was, wy do nich).
  2. Zamieszczać łącze w mailach wysyłanych na listy dyskusyjne (w podpisie)
  3. Niektóre listy dyskusyjne, (np. na Yahoo geocities) mają własne strony HTML na których można umieszczać łącza - ja zamieściłem łącze do swojej witryny na kilkunastu.
  4. Zamieścić łącza w blogach
itp., itd. - to jest jednak zabawa, która opłaca się tylko na starcie, gdy dopiero zaczynacie promować witrynę.


RADA 4:  Poszukajcie ludzi o podobnych zainteresowaniach
Poszukajcie list dyskusyjnych, i forum interntetowych na których dyskutują hodowcy i zareklamujcie się tam (łącze w podpisie e-maila). To zdecydowanie najszybszy sposób, zdecydowanie skuteczniejszy niż reklama na Google szczególnie jeśli np. chcecie sprzedać szczeniaki.


RADA 5: Zarejestrujcie się w katalogach i wyszukiwarkach
Przede wszystkim w witrynie dmoz wyszukiwarki Google (Open Directory Project):
  1. Wybieramy odpowiednią kategorię w katalogu (np. Science, a potem History of Science)
  2. Wybieramy w menu opcję suggest URL.
  3. Na stronie podajemy adres naszej witryny (dla przykładu adres mojej to http://www.oocities.org/gorgoncrown/), tytuł naszej witryny i krótki opis (mogą być po polsku).
  4. Kliknąć przycisk Submit u dołu strony, by zatwierdzić.

I oczywiście dodajcie łącze do waszej strony do katalogów wszystkich najważniejszych polskich portali: Onet, WP (Wirtualna Polska), Republika (Onetu), Gooru, Gazeta.pl, Panorama Internetu itd.

Oraz do katalogów podstawowych zagranicznych wyszukiwarek: Yahoo, MSN, AltaVista.

Na koniec:
Dla znajacych angielski, ciekawe porady na temat pozycjonowania stron można znaleźć w biuletynie e-mialowym SitePro News
Ponadto jeśli pogrzebiecie w katalogu Yahoo można znaleźć trochę użytecznych informacji na temat promowania stron WWW.

Góra strony
Pływające menu

Poniżej szablon strony WWW, z "pływającym" menu, takim, jakie możecie zobaczyć po lewej.

<html>

<head>
<title>Tu wpisz tytuł strony</title>
<meta name="Author" content="Tu wpisz autora strony">
<meta name="description" content="Tu wpisz opis strony">
<meta name="keywords" content="Tu, wpisuj, słowa, kluczowe">
<meta name="revisit" content="14 days">
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-2">

<script language="JavaScript">
<!-- Ten skrypt będzie niewidoczny dla starszych przeglądarek.
if (parent.location != window.location) {
parent.location = window.location;
}
// koniec skryptu. -->
</script>

 <script language="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function setVariables() {
if (navigator.appName == "Opera") {
v=".top=";
dS="document.";
sD="";
y="window.pageYOffset";
}
else {
v=".pixelTop=";
dS="";
sD=".style";
y="document.body.scrollTop";
}
}
function checkLocation() {
object="object1";
yy=eval(y);
eval(dS+object+sD+v+yy);
setTimeout("checkLocation()",1000);
}
// End -->
  </script>

</head>

 <body onload="setVariables(); checkLocation()" style="margin: 0pt;">

 <table style="width: 100%; text-align: left;" border="1" cellpadding="8"
cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; width: 180px;">Logo/tytuł strony<br>
</td>
<td style="vertical-align: top;">Tu wstaw ścieżkę nawigacyjną<br>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 180px;">


<div id="object1" style="position: relative; left: 5px; top: 0px; z-index: 2;">

<table style="position: fixed; width: 100%; text-align: left;" border="1"
cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">Łącze menu 1<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 2<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">Łącze menu 3</td>
</tr>
</tbody>
</table>

</div>
</td>
<td style="vertical-align: top;">
Tu wpisz/wstaw treść strony
<br>

</td>
</tr>
</tbody>
</table>

</body>

</html>

Słowo objaśnienia:

Kod wyróżniony na brązowo potrzebny jest, by menu działało pod Internet Explorerem:
  • W sekcji <head></head> definiowane są funkcje poruszajace menu.
  • W znaczniku <body> funkcje te są uruchamiane (w momencie ładowania strony)
  • Tabelka menu ujmowana jest w element <div></div>, który bedzie przesuwany przez te funkcje (a tabelka menu wraz z nim).
Natomiat pozostałym przeglądarkom wystarczy dodanie w tabelce menu wyróżnionego na czerwono atrybutu:
position: fixed;

Drugie rozwiązanie jest oczywiście znacznie prostsze i bardziej eleganckie, niestety Microsoft kontroluje większość rynku przeglądarek, stąd też potrzebny jest ten dość długi skrypt.

Fragment kodu (warunku if) przeznaczony dla przeglądarki Opera właściwie nic nie robi. Przeglądarka ta stara sie być zgodna ze standardami Microsoftu i z uniwersalnym standardem do którego stosują się pozostałe przeglądarki, dlatego trzeba Operę "wpuścić w maliny", by nie próbowała jednocześnie wykonywać skryptu dla Explorera i używać atrybutu position: fixed;

 Góra strony