HTML DLA POCZĄTKUJĄCYCH

monitoring pozycji

PIERWSZE KROKI

1) Na początku należny otworzyć na dysku jakiś katalog, gdzie będziesz trzymał pliki. Ja mam na dysku c:\ katalog strony a w nim rożne podkatalogi. Otwórz katalog o nazwie strony a w nim katalog o nazwie GPTR gdyż chyba masz zamiar zrobić stronę o zarabianiu w internecie. W tym katalogu (c:\strony\GPTR) będziesz przechowywał rożne pliki

2) do tworzenia stron WWW można użyć programu FrontPage, albo dreamweaver, ale ja w tym kursie będę uczył podstaw HTMLa. Fakt, ze prościej jest wygenerować stronę w programie podobnym do Worda, ale warto jest znać podstawowe TAGi HTMLa (choćby po to, aby naprawić to co FrontPage lubi zepsuć ;-) Znajomość HTMLa naprawdę się przydaje, jeśli będziesz chciał tworzyć bardziej zaawansowane strony, to nie zawsze FrontPage sprosta Twoim oczekiwaniom (ja HTMLa nauczyłem się oglądając pliki wygenerowane przez FrontPage)

3) utwórz na pulpicie skrót do notatnika, gdyż od teraz to będzie program, który często będzie przez Ciebie używany :-) Ja osobiście zamiast notatnika używam program EditPad, gdyż ma więcej opcji, pozwala na tworzenie plików tekstowych o rozmiarze większym niż 32KB no i najważniejsze: ma podswietlana skladnie (jak poznasz podstawy HTMLa to docenisz podswietlana skladnie)

4) na poczatek utworz plik o nazwie index.html, bedzie to Twoja strona glowna :-) Do pliku wklej nastepujacy kod:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Strona o zarabianiu</title>
</head>
<body>
Oto moje pierwsze zdanie na mojej pierwszej stronie
</body>
</html>

5) zapisz zmiany w pliku i otworz go w swojej ulubionej przegladarce internetowej. Powinien sie wyswietlic na bialym (albo szarym, w zaleznosci od ustawien przegladarki) tekst: Oto moje pierwsze zdanie na mojej pierwszej stronie a na pasku tytulowym bedzie pisac: Strona o zarabianiu - Microsoft Internet Explorer (jesli uzywasz np. Opery to zamiest Microsoft Internet Explorer bedzie pisalo Opera).

6) Teraz wyjasnie co oznaczaja poszczegolne linijki tego, co wkleiles do pliku index.html:
a) <html> - ta linijka informuje przegladarke, ze ma do czynienia z plikiem typu HTML (czyli ze strona WWW)
b) <head> - informacja dla przegladarki, ze otwierasz sekce naglowkow. Pomiedzy <head> a </head> nalezy podac rozne informacje techniczne dotyczace Twojej strony WWW (np. informacje o autorze strony, informacje o kodowaniu polskich znakow, tytul strony itp.)
c) <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> - to jest informacja o tym, ze strona zawiera Polskie znaki (ogonki)
d) </head> - zamkniecie sekcji naglowkow, zazwyczaj po tym TAGu pojawia sie tag <body>
e) <body> - ten TAG informuje przegladarke internetowa, ze sie rozpoczyna "czesc wlasciwa strony WWW".
f) Oto moje pierwsze zdanie na mojej pierwszej stronie - ten tekst zostanie wyswietlony (standardowa czcionka)
g) </body> - "zamkniecie" sekcji "czesci wlasciwej strony"
h) </html> - informacja o koncu dokumentu
Byc moze to jest dla Ciebie trudne, ale po wykonaniu kilku cwiczen okaze sie, ze to wcale nie jest takie trudne. Na razie skupimy sie na zawartosci, ktora znajduje sie pomiedzy <body> a </body>

7) No wiec pomiedzy <body> a </body> znajduje sie jakies zdanie ("Oto moje pierwsze zdanie na mojej pierwszej stronie"). Powiedzmy, ze chcesz aby slowo pierwszej bylo pogrubione. W tym celu przed fragmentem, ktory chcemy pogrubic nalezy napisac <b> natomiast na koncu fragmentu ktory ma byc pogrubiony nalezy napisac </b>. Po wykonaniu naszego cwiczenia nasz tekst powinien tak wygladac:
Oto moje pierwsze zdanie na mojej <b>pierwszej</b> stronie

8) pewnie zwrociles uwage na wiele podobnych TAGow (<b> i </b>, <html> i </html>, <body> i </body>) otoz TAG zaczynajacy sie od znaku < jest TAGiem otwierajacym a tag zaczynajacy sie od znakow </ jest TAGiem zamykajacym. Na przykladzie powyzszego przykladu: (Oto moje pierwsze zdanie na mojej <b>pierwszej</b> stronie) nasze polecenie przegladarka moze odczytac jako: napisz "Oto moje pierwsze zdanie na mojej", od teraz uzywaj pogrubionej czcionki, napisz slowo "pierwszej", przestan uzywac pogrubiona czcionke i napisz "stronie".

9) zamiast pogrubinia mozemy uzyc innych mozliwosci formatowania tekstu np. tekst zawarty pomiedzy TAGami <i> a </i> bedzie pisany kursywa, tekst pisany pomiedzy <u> a </u> bedzie podkreslony a tekst zawarty pomiedzy <font size=+1> a </font> bedzie powiekszony

10) poniewaz wprowadzilem kilka nowych polecen, ktore warto jest znac, proponuje wpisac taki oto kod:
<i>Oto</i> <u>moje</u> pierwsze <font size=+1>zdanie na</font> mojej <b>pierwszej</b> stronie

11) mozna rowniez pewien fragment tekstu jednoczesnie pochylic i pogrubic, wystarczy uzyc takiej konstrukcji:
<b><i>pogrubienie i pochylenie</i></b>

12) pewnie juz znasz kilka podstawowych TAGow umozliwiajacych formatowanie tekstu. Jednak czasami przydala by sie mozliwosc zdobienia jakiegos odstepu (tak, aby na stronie WWW dany tekst wygladal tak, jak bys nacisnal enter) w tym celu mozna uzyc takiego TAGu: <br> np.
Oto pierwsza linijka<br>
a oto druga

13) na zakonczenie dzisiejszej czesci kursu proponuje przeanalizowac taka prosta strone WWW (zwroc uwage na to co jest pomiedzy <body> a </body> na razie reszta Ciebie nie interesuje):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Strona o zarabianiu</title>
</head>
<body>
<font size=+2>Czesc</font><br>
Oto moja strona internetowa<br>
na razie jest bardzo <b>prosta</b> ale najwazniejsza jest <u>tresc</u> a nie wyglad<br>
Dziekuje za uwage<br>
<i><font size=+1>Marek</font></i>
</body>
</html>
Pewnie juz probowales tworzyc jakas prosta strone. Jesli tak, to sie ciesze, jesli nie to musisz sie przylozyc do pracy. Nie wystarczy tylko czytac ten kurs i udawac, ze jestes madry, trzeba jeszcze cwiczyc, probowac, kombinowac itp. Osobiscie uwazam, ze wystarczy 20 minut cwiczen na kazdy odcinek (wystarczy przeanalizowac omawiany przyklad no i probowac cos zmieniac). Zmieniajac rozne rzeczy w plikach HTML na pewno nie uszkodzisz komputera! (no, chyba, ze zaczniesz pisac jakies rozbudowane skrypty, ale raczej ten kurs omawia podstawy a nie super rozbudowane skrypty, wiec nie boj sie, analizuj i modyfikuj rozne pliki :-)

Ostatnio pisalem o tym, jak formatowac tekst (pogrubiac, podkreslac, pochylac, zwiekszac rozmiar czcionki). Dzisiaj tez powiem co nieco o formatowaniu tekstu. Jesli chcemy aby adny tekst byl wysrodkowany, mozna uzyc TAG <center> np.

<center>witam</center>
Ten TAG to skrocona forma TAGu:

<p align="center">witam</p>
i polecam uzywanie wlasnie tej drugiej formuly. Zamiast align="center" mozna rowniez napisac align="right" albo align="left" (tekst bedzie wyrownany od prawej albo od lewej strony). Poniewaz to moze sie wydawac dosyc trudne, to przeanalizuj ponizszy przyklad:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Strona o zarabianiu</title>
</head>
<body>
<p align="center"><font size=+2>Czesc</font><br>
Oto moja strona internetowa:</p>
<p align="left">A oto nudna gadka, pisana tekstem wyrownanym do lewej krawedzi ekranu</p>
<p align="right">A oto nudna gadka, pisana tekstem wyrownanym do PRAWEJ krawedzi ekranu</p>
<p><center>A to tekst wysrodkowany innym sposobem niz naglowek</center></p>
</body>
</html>


Mysle, ze juz wiesz, jak napisac tekst wysrodkowany i wyrownany do lewej (prawej) strony ekranu. Zazwyczaj uzywa sie wyrownania do lewej strony no i czasem (zazwyczaj w tytule dzialu) wysrodkowania, natomiast wyrownanie do prawej strony bedzie bardzo rzadko uzywane. Zamiast <p align="left"> mozna napisac samo <p>, efekt bedzie taki sam!


Teraz omowimy inne sposoby tworzenia naglowkow. Domyslnie w HTMLu jest 6 zdefiniowanych naglowkow (<h1>, <h2>, <h3>,...,<h6>). Mozna ich uzywac do ustawienia tytulu na swojej stronie np.

<h1>Strona Jelcyna</h1>

efekt bedzie taki, ze zobaczysz wielkimi literami napisane Strona Jelcyna. Mozna tez uzyc naglowka 2 a litery beda nieco mniejsze, natomiast uzywajac naglowka <h6> zobaczymy, ze litery beda malutkie. Oto przyklad wykorzystania tych naglowkow:

<h1 align="center">Strona restauracji Jelcyn'a - Menu :-)</h1>
<h2>Napoje</h2>
<p>Cola<br>
Piwo<br>
Sprite</p>
<h2>Dania:</h2>
<p>Pizza<br>
Kebab</p>
<h2>Lody</h2>
<p>Koral<br>
Algida</p>

Jak widzisz, te naglowki sa bardzo ciekawe, mozesz bardzo latwo zmienic rozmiar czcionki. Te naglowki glownie sie wykorzystuje do tworzenia tytulu strony (no i ewentualnie podtytulu).

W nastepnej czesci kursu powiem, jak zmieniac kolor czcionki, teraz przejdzmy do waznej rzeczy, jaka sa linki


Linki
-----
Powiedzmy, ze tworzysz strone o zarabianiu i chcesz na kazdej podstronie opisac tylko jedna firme. Wykonuj wskazowki wedlug ponizszych punktow a pozniej wytlumacze Tobie o co w tym wszystkich chodzi :-)

1) utworz w folderze strony jakis nowy folder np. strona2
2) utworz w notatniku plik o nazwie index.html i takiej zawartosci:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Strona o zarabianiu</title>
</head>
<body>
<h1 align="center">Polecane firmy</h1>
<p><a href="bm.htm">Bank Macieja</a> - moj faworyt!</p>
<p><a href="ir.htm">Imperium Reklamy</a> - depcza po pietasz BM</p>
</body>
</html>

3) teraz w notatniku utworz plik o nazwie bm.htm i nastepujacej zawartosci:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Bank Macieja</title>
</head>
<body>
<h1 align="center">Bank Macieja</h1>
<p>Najlepsza firma, tu se wstaw jakis opis</p>
<p align="center"><a href="index.html">Powrot na strona glowna</a></p>
</body>
</html>


4) a teraz utworz plik o nazwie ir.htm o takiej zawartosci:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Imperium Reklamy</title>
</head>
<body>
<h1 align="center">Imperium Reklamy</h1>
<p>Moj drugi faworyt, ale wedlug mnie BM jest lepszy, tu se wstaw jakis opis</p>
<p align="center"><a href="index.html">Powrot na strona glowna</a></p>
</body>
</html>

5) Nastepnym krokiem jest odpalenie w przegladarce internetowej pliku index.html. Jak widzisz, pojawi sie male menu, jak klikniesz np w Bank Macieja to zaladuje sie plik bm.htm ktory zawiera opis tej firmy, klikajac w link Powrot na strona glowna z powrotem zaladuje sie strona glowna !! Jak przeanalizujesz ten przyklad to bedziesz mogl utworzyc troszke bardziej rozbudowana strone WWW zawierajaca kilka dzialow !! Nie warto ladowac caly tekst w jednym pliku, gdyz taki duzy plik bedzie sie dlugo ladowal, najlepiej kazdej firmie stworzyc osobna podstrone (tak jak w tym przykladzie). No oczywiscie na razie nie zabieraj sie za tworzenie strony WWW, gdyz jeszcze poznasz duzo ciekawych instrukcje formatujacych tekst, ale sprobuj tak zmodyfikowac ten przyklad, aby dodac na stronie glownej nowy link i utworzyc nowa podstrone na ktorej bedzie opis jakiejs innej firmy i link wracajacy na strone glowna :-)

Teraz male omowienie tego przykladu: jak widzisz, kazda podstrona to inny plik html. Nasz serwis na razie sklada sie z plikow index.html, bm.htm i ir.htm, gdzie plik index.html to strona glowna a bm.htm i ir.htm to pliki z opisami danych firm. Aby uzytkownik sie przeniosl na inna podstrone, nalezy uzyc instrukcji <a href="strona.htm">slowo</a> gdzie zamiast strona.htm nalezy wpisac adres pliku HTML, ktory ma zostac zaladowany a slowo to ma byc jakies slowo (lub kilka slow) ktore po kliknieciu spowoduje zaladowanie innej strony. Byc moze troche to zamotalem, ale wystarczy przeanalizowac utworzone pliki i wszystko zrozumiesz :-)
COŚ CO WZBUDZA ZAUFANIE
Nawet jesli zrobisz ladna strone o zarabianiu to wcale nie oznacza, ze ludzie beda sie zapisywac do wszystkich firm, jakie wymienisz na swojej stronie (chocby to byly same uczciwe firmy). Dlaczego tak jest? Odpowiedz jest prosta: ludzie Tobie nie ufaja! Jesli na stronie dodasz dzial kontakt, gdzie podasz swoj email i jakis komunikator (np. GG, ale oprocz GG polecam rowniez Tlena lub WPKontakt, gdyz nie wszyscy posiadaja GG) to taka osoba moze Tobie zadac kilka pytan i nabierze do Ciebie troche zaufania, gdyz uzna, ze znasz sie na tym o czym piszesz na stronie (czyli na zarabianiu :-)

Nie porobuj tez na swojej stronie kolorowac faktow piszac, ze np. w firmie X zarabiasz miesiecznie 200 dolarow i jestes bogaty, bo prawda szybko wyjdzie na jaw, a ludzie straca do Ciebie zaufanie (latwiej jest stracic zaufanie, niz je zyskac)

Inny sposob za zyskanie zaufania to umieszczenie skanow dowodow wyplat. Jesli jakas firma Tobie wyplacila chocby kilka centow, to zaloguj sie na swoje konto e-gold (lub moneybookers), i zrob zrzut ekranu (polecam program MWSnap: http://www.mirekw.com). Zrzut ekranu koniecznie zapisz w formacie GIF (pliki GIF zajmuja na dysku malo miejsca, a wiec beda sie szybko ladowaly). Kazdy dowod wyplaty zwieksza zaufanie, gdyz widzac informacje ze dana firma komus wyplacila pieniadze, to z duzym prawdopodobienstwem moge zalozyc, ze ja tez otrzymam od niej wyplate. Jesli juz przygotowales zrzut ekranu to upewnij sie, ze jest on w tym samym katalogu, co Twoja strona domowa. Jesli go tam nie ma, to go tam przenies. Nadaj tez plikowi jakas prosta do zapamietania nazwe (np. tylia1.gif, bankmacieja.gif). Wazne, aby nazwa skladala sie z samych malych liter i byla bez spacji (nie jest to jakis specjalny warunek, ale warto mnie posluchac, gdyz to nam zmniejszy ilosc klopotow). Teraz mozemy na strone wkleic nasz dowod wyplaty, aby to zrobic, nalezy wpisac nastepujaca konstrukcje:

<p align="center"><img src="nazwa pliku.gif" width=300 height=50 alt="tekst"></p>

Teraz male wyjasnienie: TAG <p align="center"> </p> spowoduje, ze rysunek bedzie wysrodkowany (nie jest to obowiazkowe, ale ladniej wygladaja dowody wyplaty, ktore sa wysrodkowane a nie zbite przy lewej czesci monitora). Natmoast TAG <img src="nazwa pliku.gif" width=300 height=50 border=0> powoduje ze zostaje wyswietlony rysunek o nazwie nazwa pliku.gif. Rysunek ten ma rozmiar 300x50 pixeli (jesli jest mniejszy lub wiekszy, to przegladarka wyswietlajac go automatycznie go przeskaluje, dlatego upewnij sie, jakie wymiary ma rysunek i wpisz odpowiednie wartosci, wtedy bedzie wygladal najlepiej. Parametr alt zawiera alternatywny tekst. Jesli ktos ma np. wylaczone wyswietlanie obrazkow, to zamiast Twojego obrazka zobaczy tekst, ktory jest wpisany w parametrze alt (warto jest napisac np. dowod wyplaty od XXX, gdyz ktos kto nie ma wyswietlanych obrazkow chetnie by sie dowiedzial, co to za obrazek jest w tym miejscu umieszczony :-) (byc moze to brzmi smiesznie, ale zalecam stosowanie parametru alt, to sie bardzo przydaje przy pozycjonowaniu stron, no ale temat pozycjonowania stron zostanie omowiony w pozniejszych czesciach kursu.


JAK ZMIENIC KOLOR TEKSTU?
 Jest to bardzo ciekawa rzecz, gdyz mozna pewne kluczowe slowo (albo np. wazne uwagi) zaznaczyc kolorem czerwonym tak, aby sie rzucaly w oczy. Na poczatek mam dla Ciebie zadanie: otoz aby zmienic kolor tekstu, nalezy znac kod owego koloru. Tych kodow nie trzeba sie uczyc na pamiec, ale trzeba miec pod reka jakas tablice z kodami kolorow. Utworz w notatniku plik o nazwie kolory.htm i wklej do niego podana zawartosc:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Tablica kolorow</title>
</head>
<body>
<div align="center"><center>
<table border="1" cellpadding="0" cellspacing="0" width="700" bordercolor="#000000"
height="400">
<tr>
<td bgcolor="#FF8080" align="center">#FF8080</td>
<td bgcolor="#FFFF80" align="center">#FFFF80</td>
<td bgcolor="#80FF80" align="center">#80FF80</td>
<td bgcolor="#00FF80" align="center">#00FF80</td>
<td bgcolor="#80FFFF" align="center">#80FFFF</td>
<td bgcolor="#0080FF" align="center">#0080FF</td>
<td bgcolor="#FF80C0" align="center">#FF80C0</td>
<td bgcolor="#FF80FF" align="center">#FF80FF</td>
</tr>
<tr>
<td bgcolor="#FF0000" align="center">#FF0000</td>
<td bgcolor="#FFFF00" align="center">#FFFF00</td>
<td bgcolor="#80FF00" align="center">#80FF00</td>
<td bgcolor="#00FF40" align="center">#00FF40</td>
<td bgcolor="#00FFFF" align="center">#00FFFF</td>
<td bgcolor="#0080C0" align="center">#0080C0</td>
<td bgcolor="#8080C0" align="center">#8080C0</td>
<td bgcolor="#FF00FF" align="center">#FF00FF</td>
</tr>
<tr>
<td bgcolor="#804040" align="center">#804040</td>
<td bgcolor="#FF8040" align="center">#FF8040</td>
<td bgcolor="#00FF00" align="center">#00FF00</td>
<td bgcolor="#008080" align="center">#008080</td>
<td bgcolor="#004080" align="center">#004080</td>
<td bgcolor="#8080FF" align="center">#8080FF</td>
<td bgcolor="#800040" align="center">#800040</td>
<td bgcolor="#FF0080" align="center">#FF0080</td>
</tr>
<tr>
<td bgcolor="#800000" align="center">#800000</td>
<td bgcolor="#FF8000" align="center">#FF8000</td>
<td bgcolor="#008000" align="center">#008000</td>
<td bgcolor="#008040" align="center">#008040</td>
<td bgcolor="#0000FF" align="center">#0000FF</td>
<td bgcolor="#0000A0" align="center">#0000A0</td>
<td bgcolor="#800080" align="center">#800080</td>
<td bgcolor="#8000FF" align="center">#8000FF</td>
</tr>
<tr>
<td bgcolor="#400000" align="center"><font color="#FFFF00">#400000</font></td>
<td bgcolor="#804000" align="center"><font color="#FFFF00">#804000</font></td>
<td bgcolor="#004000" align="center"><font color="#FFFF00">#004000</font></td>
<td bgcolor="#004040" align="center"><font color="#FFFF00">#004040</font></td>
<td bgcolor="#000080" align="center"><font color="#FFFF00">#000080</font></td>
<td bgcolor="#000040" align="center"><font color="#FFFF00">#000040</font></td>
<td bgcolor="#400040" align="center"><font color="#FFFF00">#400040</font></td>
<td bgcolor="#400080" align="center"><font color="#FFFF00">#400080</font></td>
</tr>
<tr>
<td bgcolor="#000000" align="center"><font color="#FFFF00">#000000</font></td>
<td bgcolor="#808000" align="center"><font color="#FFFF00">#808000</font></td>
<td bgcolor="#808040" align="center"><font color="#FFFF00">#808040</font></td>
<td bgcolor="#808080" align="center"><font color="#FFFF00">#808080</font></td>
<td bgcolor="#408080" align="center"><font color="#FFFF00">#408080</font></td>
<td bgcolor="#C0C0C0" align="center"><font color="#FFFF00">#C0C0C0</font></td>
<td bgcolor="#400040" align="center"><font color="#FFFF00">#400040</font></td>
<td bgcolor="#FFFFFF" align="center">#FFFFFF</td>
</tr>
</table>
</center></div>
<p align="center"><small>(c) <a href="http://www.jelcyn.com">Jelcyn
</a> 2004</small></p>
</body>
</html>


Ufff, troche tego duzo. Teraz odpal ten plik w przegladarce, powiniens zobaczyc 8x6 kwadracikow, kazdy innego koloru a na nim jest napisany jakis kod np. #FF0000 (czerwony). A oto prosty przyklad, jak zmienic kolor tekstu:

<font color="#FF0000">Uwaga:</font>

Powinien sie pojawic czerwony napis Uwaga:
Jesli Ten kolor sie Tobie nie podoba, mozesz z tabeli wybrac inny kod i w miejsce kodu #FF0000 wpisac kod innego koloru.

Mozesz tez stosowac rozne kombinacje np.

<b><font color="#FF0000">Uwaga:</font></b>
to wyswietli pogrubiony czerwony napis Uwaga. Inna ciekawa kombinacja to:

<b><font size=+2 color="#FF0000">Uwaga:</font></b>
ten kawalek kodu wyswietli pogrubiony czerwony napis, ale wieksza czcionka :-)

A oto inna kombinacja:
<b><i><u>Uwaga:</u></i></b>
wyswietli czerwony napis, ktory jest pogrubiony, podkreslony i pochylony. Zauwaz, ze zamykam TAGi w odwrotnej kolejnosci niz je otwieram tj. najpierw otworzylem tag <b>, pozniej <i> a pozniej <u> natomiast najpierw zamknalem TAG </u> ktory otworzylem najpozniej, pozniej zamknalem TAG </i> a na koncu zamknalem tag </b> ktory otworzylem jako pierwszy. Zawsze nalezy najpierw zamknac ten TAG, ktory byl otwarty jako ostatni!

JAK WRZUCIC STRONE NA DO INTERNETU?
Jesli cwiczyles i juz zrobiles jakas pierwsza wersje strony, to warto jest ja wrzucic do internetu. Nawet jesli nie jest ladna, ani nie posiada zbyt wiele tresci to w ramach cwiczenia dobrze jest ja umiescic w internecie (zawsze mozesz pozniej zaktualizowac strone i wrzucic nowsza wersje).

Na poczatku nalezy zdobyc jakis program np. Total Commander (dawniej sie nazywal Windows Commander). Na postawie tego programu opisze jak skonfigurowac polaczenie FTP i wrzucic pliki. Program ten mozesz sciagnac ze strony: http://www.ghisler.com/

Jesli juz sciagnales ten program i zainstalowales to warto jest sie nim pobawic. Poniewaz program jest bardzo popularny to go juz masz i wiele nie musze tlumaczyc. Sa 2 panele w obu mozesz przegladac pliki i katalogi, jesli chcesz zaczac przegladac inny dysk musisz nacisnac ALT+F1 lub ALT+F2 (w zaleznosci od tego, czy chcesz zmienic dysk w lewym czy w prawym panelu). Jesli chcesz skopiowac jakis plik lub katalog to najedz na ten katalog i nacisnij F5 a ten plik/katalog zostanie skopiowany do katalogu, ktory jest pokazany w drugim panelu. Nie bede dokladnie tlumaczyl co i jak, program jest intuicyjny w obsludze, jak sie chwile pobawisz i znasz podstawy angielskiego to podstawowe opcje opanujesz w kilka minut.


Do wiec przechodze do meritum :-) Zakladanie kont WWW opisze na przykladzie onetu.

1. Zaloz sobie konto pocztowe na onecie, jesli go jeszcze nie masz
2. Na stronie www.republika.pl znajdz informacje o REPUBLIKA START i kliknij w przycisk Zaloz
3. Powinna sie zaladowac strona http://republika.onet.pl/zaloz.html
4. Zaloguj sie (wpisz swoj adres email i haslo)
5. Pojawi sie informacja o wybraniu adresu. Jesli wpiszesz np. jelcyn to adres Twojej strony bedzie http://www.republika.pl/jelcyn/. Proponuje wpisac swoja ksywe, mozliwe, ze owy adres bedzie zajety i bedziesz musial wpisac cos innego np. do swojej ksywy dodac rok urodzenia
6. Nastepny etap to wpisanie kodu ktory widzisz na obrazku (np. brbhm8)
7. Nastepny etap to zaakceptowanie regulaminu
8. Pozniej kliknij w link "Pomoc na temat FTP"
9. Kliknij w link: Total Commander (dawniej Windows Commander) (szybki link: http://republika.onet.pl/1,607,2,pomoc.html)
10. Przeczytaj opis, tam jest napisane (sa obrazki :-), jak skonfigurowac program Total Commander i jak wrzucac pliki na serwer
11. Gratulacje, twoja strona powinna juz byc w internecie! (adres mojej strony, ktora zostala przed chwila utworzona to http://republika.pl/jelcyn/, a drugi adres do tej samej strony to: http://jelcyn.republika.pl/)


Jak bezpiecznie podac swoj adres email?
Otrzymuje bardzo duzo spamu (niezamawianych maili z reklamami).

Skad sie bierze spam? Otoz ludzie pozyskuja adresy emailowe piszac programy ktore same "ogladaja" strony internetowe i jak znajda jakis adres emailowy, to go zapisuja do pliku. Po calej nocy taki program ogladnie kilka tysiecy stron i zbierze duzo adresow. Pozniej rozni spammerzy wymieniaja sie adresami i wysylaja jakies reklamy (viagra i te sprawy). Jednym z prostszych sposobow na utrudnienie zycia spammerowi jest zakodowanie swojego adresu email, tak aby przegladarka internetowa go wyswietlila, ale aby programy automatycznie ogladajace strony internetowe mialy z tym klopot :-) Taki program kodujacy adresy emailowe mozesz pobrac z mojej strony:

wersja pod windows:
http://www.pnet.pl/~jelcyn/freesoft/win/anty-spam.htm

wersja pod linuxa:
http://www.pnet.pl/~jelcyn/freesoft/linux/gam-pl.htm

np. moj adres jelcyn@pnet.pl zostanie zakodowany w ten sposob (nalezy ta wstawke umiescic na swojej stronie w miejscu, gdzie chcesz, aby byl wyswietlony Twoj adres email

<p><script language="JavaScript"><!--
var malpa='@';
var kropa='.';
var m1='mai';
var m2='lto:';
document.write('<a href="'+m1+m2+'jelcyn'+malpa+'pnet'+kropa+'pl">&#106;&#101;&#108;&#99;&#121;&#110;&#64;&#112;&#110;&#101;&#116;&#46;&#112;&#108;</a>');
// --></script></p>

program jest prosty w obsludze i nie bede go opisywal, pewnie po raz pierwszy w tym kursie widzisz takie dziwne i skomplikowane znaczniki HTMLa (tak naprawde to jest skrypt). I wlasnie o to chodzi, przegladarka przemieli te dziwne znaczniki i wyswietli Twoj adres email a inne programy, ktore spammerzy napisali do wylapywania mailii ze stron WWW beda mialy klopoty :-)

zachecam do stosowania tego programu, nie popelniajcie mojego bledu!!! Czasem mi sie niechcialo uruchamiac programu, wrzucilem na strone swoj email w postaci niezakodowanej (tylko na kilka dni) a po kilku tygodniach zaczely mi przychodzic reklamy Viagry ktore nadal przychodza!!! Kodujcie swoj adres emailowy, program jest prosty w obsludze darmowy i zaoszczedzi wam mase klopotow!


Wiecej o spamie znajdziesz tutaj (opisalem tylko to jak na stronie umieszczac swoje adresy mailowe, spammerzy maja tez inne sposoby na pozyskanie waszych adresow email!)
http://www.pnet.pl/~jelcyn/freesoft/porady/spam.htm

 Zmiana loga strony.

Otwórz pliki logo.gif i foto.gif za pomocą jakiegokolwiek
programu do grafiki. Może to być nawet paint
(start-programy-akcesoria-paint). Zapewne wiesz jak się nim
posługiwać więc na nic się tu nie przydadzą moje porady.

 Tło strony i kolory na stronie.

Możesz zmienić tło na np.czarne itd.
Aby to zrobić,otwórz plik style.css za pomocą programu "notatnik"

Zanjdziesz tam część odpowiedzialną za kolory, wygląda ona tak :

{background-color: #ffffff;}

#ffffff to zakodowany kolor biały

Możesz wpisać zamiast #ffffff angielski odpowiednik koloru tzn.

white
black
blue
red ...

Zmieniając plik style.css zmiany dokonują się we wszystkich
podstronach.

3. Zdjęcia poradników, programów ...

Generalnie, aby zmienić któryś z obrazków należy :
-Wgrać interesujący nas obrazek do katalogu strony
-Wkleić w miejscu gdzie chcemy obrazek odpowiedni kod

<IMG SRC="nazwa.jpg" WIDTH="150" HEIGHT="80" BORDER="0">

nazwa.jpg --oznacza nazwe pliku obrazka razem z rozszerzeniem

width="150" --oznacza szerokość obrazka

height="80" --oznacza wysokość obrazka

JAK ZALADOWAC JAKAS PODSTORNE?
Pewnie nie zawsze chcesz kogos odeslac do swojej strony glownej. Czasem chcac komus polecic tylko Bank macieja dobrze jest dac link, do podstrony na ktorej jest opisany bank macieja a nie do strony glownej. W 2 lekcji kursu robiles taki prosty przyklad: strona glowna + 2 podstrony. Jak mozesz, to w ramach cwiczenia wrzuc ta strone na serwer. Jesli adres mojej strony to http://jelcyn.republika.pl/ a plik html opisujacy Bank macieja ma nazwe bm.htm to adres do tej podstrony to http://jelcyn.republika.pl/bm.htm.


CO NIECO O LITERACH
Wazna uwaga: otoz pod windowsem pliki o nazwie A.txt i a.txt to te same pliki. Natomiast pod Linuxem mozna miec w katalogu plik o nazwie a.txt i A.txt i sa to ROZNE pliki!!! Dlaczego to takie wazne? Otoz prawie wszystkie serwery w internecie pracuja na linuxach! Tak wiec adresy
http://jelcyn.republika.pl/bm.htm
i
http://jelcyn.republika.pl/BM.HTM
to sa adresy do dwoch roznych plikow i w przypadku tego drugiego adresu pojawi sie blad, gdyz plik o takiej nazwie nie istnieje na serwerze! Tak wiec dla bezpieczenstwa warto dbac, aby wszystkie pliki mialy nazwy skladajace sie tylko z malych liter (i ewentualnie cyfr) gdyz ciezko bedzie Tobie spamietac czy plik o nazwie bankmacieja.htm byl pisany duzymi czy malymi literami a jak teraz z gory zalozysz, ze stosujesz tylko male litery, to latwiej bedzie Tobie w przyszlosci zapanowac nad calym serwisem!

Malo tego, jesli na dysku utworzysz plik o nazwie bm.htm a w pliku index.html dasz taki kod: <a href="BM.HTM">BankMacieja</a> to u Ciebie na dysku wszystko bedzie ladnie chodzic (klikniesz na link, zaladuje sie strona z opisem Banku Macieja) ale jak wrzucisz na serwer to sie okaze, ze klikajac w link pojawia sie blad, gdyz plik o nazwie BM.HTM nie istnieje (istnieje plik o nazwie bm.htm).

To jest wazna rzecz, naucz sie juz teraz uzywac tylko malych liter dajac plikom nazwy!!! Oczywiscie w kodzie HTML gdy odwolujesz sie do pliku (robisz link, albo np. wstawiasz jakis obrazek na strone) tez pilnuj, aby pisac malymi literami! Jest to niezwykle wazne i pozwoli Tobie w przyszlosci uniknac przykrych niespodzianek!

NIE POPELNIAJ TEGO SAMEGO BLEDU CO JA. ZACZNIJ SIE UCZYC NIE NA SWOICH, ALE NA CUDZYCH BLEDACH!


SUBSKRYCJA
Teraz co nieco o marketingu :-)
Czesto na roznych stronach mozna zostawic swoj email, aby otrzymywac informacje o aktualizacji strony. Darmowa subskrycje mozesz zalozyc np. w serwisie: http://sub.4free.pl

Dlaczego warto miec wlasna subskrycje? Odpowiedz jest prosta: mozesz szybko poinformowac ludzi o aktualizacji strony. Oczywiscie na razie znasz tylko podstawy HTMLa i zanim utworzysz porzadna strone, minie troche czasu, ale juz warto poznac tajniki marketingu (zreszta ten kurs czytaja tez osoby co juz znaja HTMLa to ich tez musze zadowlic :-)

Oto korzysci jakie masz z subskrycji:
- szybkie info o aktualizacji strony
- ludzie beda wracac na Twoja strone, gdyz beda chceili zobaczyc nowe dzialy/artykuly/newsy na stronie
- zalozmy, ze co tydzien zapisze sie tylko 1 osoba do subskrycji. Po roku bedziesz juz mial az 52 osoby! Bedziesz mogl informowac ludzi o nowych ciekawych firmach nie placac za mailing (w Banku Macieja reklamy sa platne a Ty bedziesz mogl sobie za darmo wysylac maile :-)

Tylko pamietaj, nie przesadzaj z mailami, tak 1-2 maile na tydzien to optymalna ilosc. Nigdy nie zapisuj nieznajomych osob do subskrycji, gdyz to jest SPAM, kto bedzie chcial to sie zapisze do subskrycji a jak kogos zapiszesz na sile to nie tylko mozesz miec nieprzyjemnosci, ale rowniez ta osoba raczej nie bedzie czytac Twoich mailii.

Jak robic wypunktowanie ?
Czasami istnieje potrzeba wypunktowania pewnych rzeczy, np. korzysci danej oferty (np. korzysci uczestnictwa w BM). Dane korzysci mozna wypunktowac na dwa sposoby, pierwszy sposob to punktowanie od kropek. Oto prosty przyklad:

<p>Korzysci uczestnictwa w BM</b>
<ul>
<li>darmowe czlonkowstwo</li>
<li>uczciwy webmaster</li>
<li>liczne kursy doksztalcajace</li>
<li>niskie ceny reklam</li>
<li>ciekawe forum</li>
</ul>

Jak widzisz, aby rozpoczac "punktowanie" musisz napisac TAG <ul>. Pozniej aby poinformowac przegladarke internetowa, ze od tego slowa ma sie zaczac nowa "kropka" musisz uzyc TAGu <li> (oczwiscie, jesli to nie jest pierwsza "kropka" to musisz "zamknac" poprzednia kropke wstawiajac TAG </li>


Inny sposob na wymienienie korzysci to numerowanie. Oto prosty przyklad:

<p>Korzysci uczestnictwa w BM</p>
<ol>
<li>darmowe czlonkowstwo</li>
<li>uczciwy webmaster</li>
<li>liczne kursy doksztalcajace</li>
<li>niskie ceny reklam</li>
<li>ciekawe forum</li>
</ol>

Jak widzisz, ten przyklad zbytnio sie nie rozni od poprzedniego (zamiast TAGu <ul> nalezy uzyc <ol>, wtedy przegladarka wie, ze chcesz cos numerowac). Jak widzisz, wcale nie musisz sie martwic, ktory aktualnie jest punkt, po prostu dane zdanie obejmujesz TAGami <li> </li> a przegladarka internetowa sama automatycznie wstawi po lewej stronie kolejne cyferki (1,2, 3 itp.)


Jak zmienic kolor tla?
Domyslnie jak robisz strone, to tlo jest biale (lub w niektorych starszych przegladarkach internetowych jest szare). Potrafisz juz zmieniac kolor liter (a jak nie potrafisz, to jeszcze raz przestudiuj lekcje 3), wiec dobrze jest poznac sposob na zmiane koloru tla. Dlaczego? Odpowiedz jest prosta: biale litery niezbyt ciekawie wygladaja na bialym tle (ale na czarnym sa jak najbardziej OK).

Zanim zaczniesz sie bawic w zmiane kolorow, zastanow sie czy masz gust plastyczny. Naprawde nie raz widzialem strone gdzie ciezko cos sie czytalo (np. zolte litery na bialym tle (na czarnym tle by wygladaly calkiem OK), albo jaskrawe tlo, ktore wali po oczach - autora takiej strony najchetniej ukaralbym koniecznoscia nieprzerwanego 10 minutowego gapienia sie na swoja strone :-)

Jesli juz jestes zdecydowany na zmiane tla strony i wiesz, ze owa kombinacja kolorow bedzie ciekawa (polecam zolte lub jasno zielone litery na czarnym tle) to zaladuj sobie plik HTML w ktorym byla tabelka kolorow (kody kolorow sa takie same do wszystkich instrukcji, niezaleznie od tego czy chcesz zmienic np. kolor liter, kolor tla strony, czy kolor wewnatrz komorki tabeli). Aby ustalic kolor tla nalezy w kodzie HTML zamiast <body> wpisac <body bgcolor="KOD KOLORU">

A oto prosty przyklad:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Strona testowa</title>
</head>
<body bgcolor="#000000">
<h1 align="center"><font color="#00FF00">Strona testowa</font></h1>
<p><font color="#00FF00">Bla Bla Bla</font></p>
</body>
</html>

Zamiast zmiany koloru, mozesz tez jako tlo dac jakis ciekawy podklad, np. jakis wzorek (najlepiej cos delikatnego, aby kontrastowalo z literami np. jesli masz ciemne litery to warto dac jako podklad jakis wzorek w kolorze "kremowym"). Jesli robisz jakis plik graficzny jako podklad, to postaraj sie dobrac cos co bedzie ladnie sie komponowalo z Twoja strona (ladny wzorek wcale nie musi ladnie wygladac jako tlo strony). Aby dac jako tlo plik graficzny, nalezy w TAGu BODY dopisac nastepujacy parametr:

background="nazwapliku.gif"

gdzie plik o nazwie nazwapliku.gif musi byc w tym samym katalogu co strona WWW

Teraz drobna uwaga: czesto widze strony, gdzie sa biale litery, kolor tla jest bialy a kolor podkladu (plik graficzny) jest czarny. Wszystko jest ladnie, ale jak mi sie nie zaladuje ten plik graficzny to nic nie bede widzial, wiec jesli piszesz bialymi literami a podklad jest czarny, to warto dac czarne tlo, oto prosty przyklad:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Strona testowa</title>
</head>
<body bgcolor="#000000" background="black_motyw.gif">
<h1 align="center"><font color="#FFFFFF">Strona testowa</font></h1>
<p><font color="#FFFFFF">Bla Bla Bla</font></p>
</body>
</html>

zaleta takiego rozwiazania jest fakt, ze jak sie nie zaladuje podklad, to i tak tlo strony bedzie czarne i bez problemu przeczytam co jest napisane. Niby to jest drobiazg, ale niektorzy popelniaja ten drobny blad :-(


Powazny wyglad strony
Duzo osob robiac strony daje jakies bajery (np. jakies animowane rysunki (np. szeleszczaca kasa) albo neony (poruszajacy sie tekst). Osobiscie bardzo nie lubie takich wodotryskow. Strona ma byc estetyczna a przede wszystkim ma zawierac wartosciowe informacje a nie byc jednym wielkim wodotryskiem. A jak bede chcial podziwiac artystyczne prace to na pewno nie bede ogladal strony z wieloma animacyjkami, tylko pojde do muzeum poogladac jakies obrazy).

TABELE
Dzisiaj omowie tabele. Wbrew pozorom to bardzo wazne zagadnienie. Pewnie nawet nie zdajesz sobie z tego sprawy, jak czesto sie wykorzystuje tabele. Jesli myslisz ze tabele sie stosuje tylko wtedy, gdy chce sie wyswietlic tabele, to sie mylisz, gdyz czesto stosuje sie niewidoczne tabele aby dokonac odpowiedniego rozmieszczenia strony. Na poczatku omowmy jak sie tworzy tabele. Mysle, ze ponizszy przyklad Ciebie oswieci:

<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="50%">Wiersz 1, kolumna 1</td>
<td width="50%">Wiersz 1, kolumna 2</td>
</tr>
<tr>
<td width="50%">Wiersz 2, kolumna 1</td>
<td width="50%">Wiersz 2, kolumna 2</td>
</tr>
<tr>
<td width="50%">Wiersz 3, kolumna 1</td>
<td width="50%">Wiersz 3, kolumna 2</td>
</tr>
</table>
</center></div>

Pierwsza linijka kodu definiuje tabele, aby byla wysrodkowana. W drugiej linijce parametr border okresla ze tabela ma byc gruba na 1 pixel, kazda komorka ma miec 5 pixelowy margines (aby litery nie zlewaly sie z krawdziami tabeli) a parametr width=90% okresla, ze tabela ma zajmowac 90% wielkosci ekranu (gdyby bylo samo 90, to wtedy szerokosc tabeli by wynosila 90 pixeli).

Aby zdefiniowac nowy wiersz, nalezy uzyc tagow <tr></tr>. Natomiast, aby w wierszu utworzyc kolumne nalezy zdefiniowac TAGi <tr> i </tr>. Zauwazyles pewnie, ze w przykladzie przy TAGu td jest parametr width=50%, on okresla ze kolumna ma miec wielkosc 50% rozmiaru TABELI. Jesli w drugiej linijce zmienisz border="1" na border="0" to krawedzie tabeli beda niewodoczne (jest to dobre do zdefiniowania ciekawego ukladu strony o czym napisze ponizej). Co do tego przykladu, to kazdy wiersz moze miec tyle samo kolumn. O scalaniu komorek powiem w nastepnym odcinku.


A teraz podam ciekawe zastosowanie tabeli (z niewidzialnymi krawedziami). Zobacz ponizszy kod HTML:

<div align="center"><center>
<table border="0" cellpadding="10" cellspacing="0" width="500">
<tr>
<td width="50%" valign="top">Zauwaz, ze ten tekst wyglada, jak by byl w gazecie, jest lewa
i prawa kolumna. Tutaj jeszcze sobie popisze troche glupot: bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla </td>
<td width="50%" valign="top">A oto lewa kolumna. bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla </td>
</tr>
</table>
</center></div>

Jak widzisz, za pomoca niewidzialnych tabel mozna wyczarowac ciekawe rzeczy :-) Jutro powiem wiecej o tabelach



JAK SPOPULARYZOWAC SWOJA STRONE WWW?
Platna reklama nie jest dobra, gdyz po zakonczeniu kampanii reklamowej ruch na Twojej stronie zmaleje (fakt, ze zyskasz kilku nowych stalych odwiedzajacych). A moze by tak za darmo i dlugoterminowo zwiekszyc ilosc odwiedzajacych? Polecam Tobie darmowy kurs pozycjonowania stron w wyszukiwarkach, dzieki temu kursowi mozesz zwiekszyc ilosc odwiedzin na stronie nawet o kilkaset procent! Pomysl sobie, ile osob korzysta z wyszukiwarek. Dzieki odpowiednim technikom Tworzenia stron WWW Twoj serwis moze byc bardziej widoczny w wyszukiwarce! Kurs jest darmowy i mozna sie do niego zapisac klikajac w ten link: http://tinyurl.com/48745

Ja zaufalem Piotrowi Majewskiemu i wiem, ze moje strony odwiedza wiecej osob. Ty tez mozesz na tym skorzystac! (Wiecej odwiedzjacych = wiecej poleconych w roznych firmach = wieksze zarobki)!

WIECEJ O TABELACH
Dzisiaj napisze cos wiecej o tabelach. Na poczatku zajmijmy sie formatowaniem danych w tabeli. Oto prosty przyklad tabeli:

<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="50%">Pierwsza Linijka<br>
Druga Linijka<br>
No i trzecia<br>
A tu czwarta</td>
<td width="50%">Jakis tam tekst</td>
</tr>
</table>
</center></div>

Zauwaz, ze w piierwszej komorce sa 4 linijki tekstu a w drugiej tylko 1. W drugiej komorce tekst jest na srodku komorki. Nie zawsze to ladnie wyglada. Powiedzmy, ze chcielibysmy, aby tekst w drugiej komorce byl na gorze, albo na samym dole a nie na srodku. Mozna uzyc prostej sztuczki i w drugiej komorce uzyc 3 razy TAGu <br>, ale to jest zle rozwiazanie. Nalezy tutaj na przegladarce wymusic, aby dane nie byly wycentrowane w pionie, tylko byly wyswietlane od gornej krawdzi. Oto zmodyfikowany przyklad:

<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="50%">Pierwsza Linijka<br>
Druga Linijka<br>
No i trzecia<br>
A tu czwarta</td>
<td width="50%" valign="top">Jakis tam tekst</td>
</tr>
</table>
</center></div>

Jak widzisz, ten przyklad sie rozni tym, ze zostal dodany atrybut valign="top". Jesli chdemy, aby dane byly wyrownane od dolu, nalezy uzyc parametru valign="bottom"


Ostanio obiecalem, ze napisze co nieco o scalaniu komorek. Zalozmy, ze tworzysz tabele i chcesz miec u gory 3 komorki a u dolu tylko 2. Po co? Na pewno czasami trzeba scalic jakies komorki, aby strona ladnie wygladala. Oto prosty przyklad:

<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="33%">k1 w1</td>
<td width="33%">k2 w1</td>
<td width="34%">k3 w1</td>
</tr>
<tr>
<td width="66%" colspan="2">k1i2 w1</td>
<td width="34%">k3 w2</td>
</tr>
</table>
</center></div>

Co sie zmienilo? Otoz zostal dodany atrybut colspan="2" i przegladarka internetowa wie, ze ta komorka powstala ze scalenia dwoch komorek. Gdyby nie bylo tego atrybutu, to tabela by sie "rozjechala" i strona bardzo przydko by wygladala (w ramach cwiczenia sprawdz, co by bylo, gdybys usunal ten atrybut. Oczywiscie mozna scalic wiecej niz 2 komorki (jesli tabela ma 3 komorki to logiczne, ze nie mozesz uzyc parametru colspan="4", ale mozesz uzyc parametr colspan="3", musisz dbac, aby w kazdym wierszu bylo tyle samo komorek, gdy sie scala jakies komorki to w tym wypadku ta scalona komorka liczy sie jako dwie komorki). Ponizej podaje bardziej praktyczny przyklad scalania komorek:

<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="100%" colspan="2"><p align="center"><strong>Oto moje wyniki finansowe</strong></td>
</tr>
<tr>
<td width="50%"><p align="center"><strong>e-gold</strong></td>
<td width="50%"><p align="center"><strong>mBank</strong></td>
</tr>
<tr>
<td width="50%"><p align="center">10$</td>
<td width="50%"><p align="center">20 zl</td>
</tr>
</table>
</center></div>


A tutaj jest przyklad scalania komorek w pionie:
<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="50%">k1 w1</td>
<td width="50%">k2 w1</td>
</tr>
<tr>
<td width="50%" rowspan="2">k1 w 2,3</td>
<td width="50%">k2 w2</td>
</tr>
<tr>
<td width="50%">k2 w3</td>
</tr>
</table>
</center></div>

Jak widzisz, zostal uzyty atrybut rowspan="2" i przegladarka wie, ze dana komorka jest scalona z nastepna (ta co jest pod ta) w pionie. W nastepnej sekcji <tr> oczywiscie nie wprowadzamy informacji o tej komorce, co jest scalona, tylko o nastepnych (w tym wypadku sa to informacje o drugiej komorce, gdyz pierwsza jest scalona z ta, co jst nad nia)

W ten oto prosty sposob opanowales tabele. Jest jeszcze 1 ciekawa rzecz, o ktorej nie wspominalem: tabele moga byc zagniezdzone, tj. w 1 tabeli moze byc druga, ponizej jako ciekawostke podaje prosty przyklad:

<div align="center"><center>
<table border="1" cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="50%">oto jakis przyklad</td>
<td width="50%">bla bla bla</td>
</tr>
<tr>
<td width="50%">a tu dam inna tabele<div align="center"><center><table border="1"
cellpadding="5" cellspacing="0" width="90%">
<tr>
<td width="50%">k1w1</td>
<td width="50%">k2w1</td>
</tr>
<tr>
<td width="50%">k1w2</td>
<td width="50%">k2w2</td>
</tr>
</table>
</center></div><p>o i juz sie skonczyla :-)</td>
<td width="50%">he he he</td>
</tr>
</table>
</center></div>

przyklad ten jest troche zagmatwany, ale warto go na spokojnie przeanalizowac. Wyglada on strasznie, ale jest prosty: po prostu w jednej komorce utworzylem tabele 2x2. Warto opanowac dobrze tabele, bo to jeden z podstawowych sposobow formatowania tresci na stronie. Poza tym tworzac strone na ktorej elementy rozmiescisz na podstawie tabel, musisz uwazac, gdyz kasujac przez nieuwage jakis znacznik mozna zepsuc cala strone!


GRAFIKA
Chcialbys utworzyc na swojej stronie jakies logo? Zastanawiasz sie, jak ludzie robia jakies ladne napisy? Odpowiedz jest prosta: uzywaja jakiegos programu graficznego (w Paincie nie zrobisz ladnego napisu). Mozna wykorzystac w Wordzie modul WordArt, ale on udostepnia tylko kilka rodzajow napisow i one sa powszechnie znane. Polecam darmowy program graficzny GIMP (http://gimp.org/), ktory ma ciekawe mozliwosci (i wystepuje w dwoch wersjach: pod Windows i pod Linuxa). Program jest dziwny i trzeba czasu, aby sie przyzwyczaic do specyficznego interfejsu uzytkownika, ale warto, bo jest darmowy i oferuje wiele ciekawych rzeczy (np. cos w rodzaju WordArta z Worda, ale ma wiecej stylu i wieksze mozliwosci konfiguracji).

Ladny naglowek przyciąga ludzi na strone, wiec warto poswiecic troche czasu na jego wykonanie. Jesli nie miales do czynienia z tym programem to polecam ta ksiazke (ksiazka jest pisana bardzo prostym jezykiem, jest duzo obrazkow, wiec mozna szybko opanowac ten program): http://helion.pl/view/1486A/cwgimp.htm

MENU
Dzisiaj omowie ciekawy sposob Tworzenia na stronie menu. Jesli Twoj serwis sie rozbuduje i bedzie sie skladal np. z 20 plikow HTML i bedziesz chcial dodac nowy dzial, to raczej nie bedziesz zadowolony z tego, ze trzeba modyfikowac az 20 plikow tylko po to, aby w menu dodac 1 link (podczas tworzenia strony czesto sie zdarzaja takie niespodzianki). Jednym z rozwiazan jest zrobinie strony opartej na ramkach, ale ramki sa niemodne i niewygodne, kazdy dzisiaj odradza stosowanie ramek. No wiec co mozna zrobic? Sa az 2 rozwiazania: pierwsze to skorzystanie z programu, ktory w danym katalogu wyszukuje wszystkie pliki html i zastepuje jakis ciag znakow na inny np. majac taki kod:

<a href="index.html>strona glowna</a><br>

mozna go zamienic na:

<a href="index.html>strona glowna</a><br>
<a href="oszusci.html">oszusci</a><br>

dzieki czemu szybko i przyjemnie na kazdej podstronie w menu pojawi sie nowy dzial oszusci, ktory znajduje sie tuz pod linkiem strona glowna. Ja do tego celu uzywam program BK Replace EM (http://www.orbit.org/replace/). Ten program bardzo czesto mi sie przydaje do roznych rzeczy wiec warto go miec i pocwiczyc nim na malo waznych plikach (np. stara wersja Twojej strony).


Druga mozliwosc to stworzenie menu w JavaScript. W mijescu gdzie ma sie pojawic menu dajesz taka wstawke: <script language="JavaScript" src="menu.js"></script> a na dysku tworzysz plik menu.js o takiej zawartosci:

document.write('<a href="index.html>strona glowna</a><br>');
document.write('<a href="oszusci.html">oszusci</a><br>');
document.write('dowolne TAGI HTMLa');

wazne, aby nie uzywac apostrofu, gdyz wtedy skrypt sie wysypie. Zaleta tego rozwiazania jest fakt, ze zmienisz 1 plik a menu sie zmieni na wszystkich stronach! Jednak osoby, ktore maja przegladarke nie obslugujaca JavaScript'a nie beda widzialy menu, wiec dla tych osob warto na stronie glownej na samym dole dac alternatywne menu (zobacz na moja strone www.jelcyn.com, po lewej stronie jest menu pisane w JS a na samym dole sa rozne linki).


Inny sposob to pisanie strony w PHP, ale nie kazdy ma serwer obslugujacy ten jezyk skryptowy no, ale z pewnoscia w pozniejszych czesciach kursu wspomne co nieco o PHP

ANIMACJE I INNE WODOTRYSKI
Strona ma byc uzyteczna a nie ladna. Dlatego przestrzegam przed dodawaniem zbednych wodotryskow. Dlaczego? Otoz taki ogladacz strony zamiast sie skupic np. na opisie BankuMacieja skupia sie np. na chodzacych monetach. Czesto takie animacyjki rozpraszaja uwage do tego stopnia, ze dany ogladacz nie chce czytac co napisales, bo po prostu denerwuja go te bajery. Dlatego warto ograniczyc na stronie rozne grafiki, ktore tylko powoduja, ze strona dluzej sie laduje. Uwazam, ze w zupelnosci wystarczy logo strony+"skany" wyplat


CO TO TRANSFER?
Ostatnio modne stalo sie ograniczanie transferu. Np. na republice jest to 1GB miesiecznie. Tyle danych w ciagu miesiaca moga od ciebie sciagnac ogladacze strony. 1GB to 1024MB. Tak wiec jesli codziennie 20 osob bedzie od Ciebie ze strony sciagac plik majacy rozmiar 1MB, zuzyjesz 600 (20*30*1) MB transferu. Natomiast jesli owe 20 osob codziennie bedzie sciagac 2MB plik, to w ciagu miesiaca zyzyliby az 1200MB (po przekroczeniu 1GB transferu konto jest blokowane i do konca miesiaca strona nie chodzi). Zalozmy taka sytuacje, dla uproszczenia zalozmy, ze twoj serwis sklada sie tylko z 1 pliku: index.html. Jesli plik index.html ma 10KB a plik ten laduje logo majace 5KB i np. 2 skany wyplat (kazdy ma po 5KB) to kazda osoba ogladajaca Twoja strone zuzywa 25KB transferu. Wystarczy, ze 40 osob odwiedzi Twoja strone i juz zuzyli az 1MB. Tak wiec, w ciagu miesiaca moze Twoja strone odwiedzic az 40.000 osob (gdyz Twoja strona zajmuje malo miejsca, wiec i ludzie malo "sciagaja" z Twojego serwera). Jest to kolejny powod dlaczego nie warto dawac zbednych grafik: taka animacja tylko zwieksza ilosc danych sciaganych z Twojego serwera. Oczywiscie nie mozna popadac w paranoje, jesli np. nie zamiescisz dowodu wyplaty, to ludzie sie nie zapisza do danej firmy, bo nie uwierza, ze Tobie ona wyplacila. Warto wiec dawac na stronie malo grafik i uwazac, aby grafika nie zajmowala wiecej niz np. 10KB. Kazdy zbedny plik moze Ciebie drogo kosztowac (albo strona nie bedzie dzialac do konca miesiaca, albo bedziesz musial zaplacic za dodatkowy transfer). Limity transferu to wazna rzecz, sam czesto widuje w BM reklame ciekawej strony wchodze, a tu info o przekroczeniu limitu transferu. Dlatego gdy reklamujesz swoja strone upewnij sie, ze strona wytrzyma np. 2000-3000 odwiedzin (tyle osob odwiedza strone gdy w BM zostanie puszczony mail do wszystkich). Warto tez sie upewnic czy nie ma innych limitow, rozne darmowe serwery wymyslaja glupie limity np. 1GB miesiecznie, ale jest ograniczenie np. do 10MB na godzine(!). Warto wybrac taki serwer, ktory daje limit transferu jedynie XGB na miesiac i nie interesuje go ze np. w ciagu godziny zuzyjesz polowe miesiecznego limitu ;-) Probujac oszacowac ruch na stronie nalezy uwzglednic tez fakt, ze czesc osob po zobaczeniu strony glownej zerknie np. do dzialu oszusci. Jednak mam dobra wiadomosc: jesli na kazdej podstronie zmiescisz logo, to zostanie ono tylko raz pobrane z serwera, pozniej juz przegladarka bedzie pobierala logo z dysku
Strona o zarabianiuStrona o zarabianiu 
Centrumreklamy.com
Kreator stron internetowych - strona bez programowania