Programming.pun.pl

Poniedziałek 4 Padziernik

T�o obrazkowe

Spoiler:
...

lub

Spoiler:
...

(t�o nieruchome - znak wodny - nie obs�uguje Firefox!)
gdzie jako "�cie�ka dost�pu do obrazka" nale�y poda� lokalizacj�, gdzie znajduje si� obrazek, kt�ry chcemy umie�ci� w tle.
Je�li znudzi�y Ci si� ju� strony o jednolitym kolorze, mo�esz umie�ci� w tle dowolny obrazek. Dzi�ki temu strona mo�e wygl�da� du�o lepiej. Ponadto drugie z podanych polece� pozwala zdefiniowa� t�o obrazkowe kt�re jest nieruchome, tzn. nie przesuwa si� wraz z tekstem, gdy przewijamy zawarto�� okna.

Pami�taj jednak, �e obrazki o du�ych rozmiarach spowalniaj� wczytywanie strony. Dlatego staraj si� u�ywa� pliki tylko w formacie *.jpg (dla zdj�� wielokolorowych) lub *.gif (dla rysunk�w). S� to formaty skompresowane, zajmuj�ce du�o mniej miejsca ni� zwyk�e mapy bitowe *.bmp. Trzeba r�wnie� pami�ta�, aby obrazek w tle nie by� zbyt jaskrawy - spowoduje to tylko zaciemnienie zawarto�ci strony i utrudni czytanie.

Zauwa�, �e nie ma potrzeby stosowania obrazka t�a o rozmiarze takim jak strona, poniewa� jego kopie s� ustawiane obok siebie tak, �e zajmuj� ca�y obszar strony. Dlatego wystarczy wyci�� ma�y powtarzaj�cy si� wz�r, kt�ry zostanie nast�pnie powielony przez przegl�dark�.

Nale�y unika� stosowania w tle du�ych obrazk�w wyci�tych ze zwyk�ych zdj��. T�o powinno: mie� �agodne kolory (pastelowe, blade albo ca�kiem ciemne, ale nie jaskrawe; szczeg�lnie odradza si� jednoczesnego stosowania barw jasnych oraz ciemnych, poniewa� uniemo�liwia to dobranie odpowiednio czytelnego koloru tekstu), sk�ada� si� z powtarzalnych wzor�w o niezbyt wielkich rozmiarach oraz by� nieco rozmyte - nieostre (mo�na to uzyska� w dowolnym bardziej rozbudowanym programie graficznym - odpowiedni efekt nazywa si� zwykle: Rozmywanie albo Blur). Dobrym pomys�em s� t�a imituj�ce struktur� jakiej� powierzchni.

Je�li nie masz zaci�cia artystycznego, nie musisz samodzielnie rysowa� obrazk�w t�a. W Internecie na pewno znajdziesz wiele stron, gdzie mo�esz je darmowo pobra�. Cz�sto s� one dost�pne r�wnie� w edytorach HTML (np.: FrontPage) oraz programach graficznych.

R�wnocze�nie z atrybutem background="..." cz�sto podaje si� dodatkowo zwyczajny kolor t�a strony. W takim przypadku, je�li obrazek b�dzie niedost�pny lub u�ytkownik wy��czy wy�wietlanie obraz�w, t�o przyjmie podany kolor. Ponadto je�eli obrazek posiada przezroczysto�� (np. format *.gif), zostanie ona zast�piona podanym kolorem.

Je�li ustalimy kolor tekstu strony (text="...") zbli�ony do domy�lnego koloru t�a (zwykle bia�y), wskazane jest podanie dodatkowo takiego koloru t�a (bgcolor="..."), aby tekst by� na nim czytelny. Je�eli tego nie zrobimy, a obrazek nie zostanie wy�wietlony, mo�e wyst�pi� sytuacja typu: "bia�y tekst na bia�ym tle".

Mo�e si� to zdarzy� np. gdy obrazek w tle strony jest do�� ciemny. Wtedy okre�la si� zwykle jasny kolor tekstu, zapominaj�c o ustaleniu r�wnocze�nie ciemnego koloru t�a - jako zabezpieczenie. Dop�ki obrazek jest widoczny, wszystko jest w porz�dku, lecz je�li nie zostanie on wy�wietlony, t�o przyjmie najcz�ciej kolor bia�y (jako domy�lny) i w ten spos�b otrzymamy stron�, kt�rej nie mo�na przeczyta� :-(

Atrybut BACKGROUND jest zdeprecjonowany przez specyfikacj� HTML 4.01 - zaleca si� stosowanie styl�w.

Atrybut BGPROPERTIES nie wchodzi w sk�ad specyfikacji HTML 4.01 - zaleca si� stosowanie styl�w.

kurs by kurshtml

Poniedziałek 4 Padziernik

Kolor t�a strony

Spoiler:
...

gdzie "kolor" oznacza definicj� koloru [zobacz: Kolory].
Polecenie pozwala okre�li� kolor t�a na Twojej stronie internetowej (domy�lnie zwykle jest to bia�y). Pami�taj, �e nie powinno si� u�ywa� barw bardzo jaskrawych jako kolory t�a. Sprawiaj� one, �e oczy szybko si� m�cz� i dodatkowo zaciemniaj� tre�� strony. Dodatkowo nale�y pami�ta�, aby na ustalonym kolorze t�a, tekst by� dobrze widoczny.

R�wnocze�nie z kolorem t�a strony powinni�my okre�li� odpowiedni kolor tekstu, nawet je�li odpowiada nam domy�lny. Pami�taj, �e u�ytkownik mo�e zmieni� domy�lny kolor tekstu w swoim systemie operacyjnym, a wtedy istnieje prawdopodobie�stwo, �e b�dzie on podobny do koloru t�a ustalonego na Twojej stronie, co wywo�a brak mo�liwo�ci odczytania tre�ci lub bardzo utrudni czytanie. To samo dotyczy koloru odsy�aczy hipertekstowych.

Atrybut BGCOLOR jest zdeprecjonowany przez specyfikacj� HTML 4.01 - zaleca si� stosowanie styl�w.

kurs by kurshtml

Poniedziałek 4 Padziernik

Kolor tekstu strony

Spoiler:
...

gdzie "kolor" oznacza definicj� koloru [zobacz: Kolory].
Polecenie pozwala okre�li� kolor tekstu na Twojej stronie internetowej (domy�lnie zwykle jest to czarny). Staraj si� u�ywa� barw, kt�re b�d� si� dobrze wyr�nia�y na kolorze t�a.

Edytory (X)HTML posiadaj� cz�sto specjalny selektor kolor�w, za pomoc� kt�rego mo�na w prosty spos�b wybra� barw� o dowolnym odcieniu.

R�wnocze�nie z kolorem tekstu strony powinni�my koniecznie okre�li� odpowiedni kolor t�a, nawet je�li odpowiada nam domy�lny. Pami�taj, �e u�ytkownik mo�e zmieni� domy�lny kolor t�a w swoim systemie operacyjnym, a wtedy istnieje prawdopodobie�stwo, �e b�dzie on podobny do koloru tekstu ustalonego na Twojej stronie, co wywo�a brak mo�liwo�ci odczytania tre�ci lub bardzo utrudni czytanie.

Atrybut TEXT jest zdeprecjonowany przez specyfikacj� HTML 4.01 - zaleca si� stosowanie styl�w.

kurs by kurshtml

Poniedziałek 4 Padziernik

Wst�p

Znaczniki ... oraz okre�laj� pewne informacje na temat strony jako ca�o�ci. Polecenie BODY powinno wchodzi� w sk�ad ka�dego dokumentu HTML. Stanowi ono w�a�ciw� tre��, czyli tzw. cia�o, w kt�rym zawieraj� si� wszystkie inne znaczniki, dotycz�ce formatowania, a tak�e zwyk�y tekst. Podaj�c dodatkowe atrybuty dla znacznika BODY, mo�na okre�li� niekt�re cechy wygl�du ca�ej strony, takie jak kolor t�a oraz tekstu lub szeroko�� margines�w. W jednym dokumencie mo�e si� znajdowa� tylko jeden znacznik - zaraz po nag��wku strony (...).

Natomiast znacznik stanowi tzw. metainformacj�, pozwalaj�c� okre�li� pewne og�lne wiadomo�ci, dotycz�ce dokumentu, m.in. spos�b kodowania znak�w, opis zawarto�ci strony, jej autora czy j�zyk, w kt�rym zosta�a napisana. Metainformacje nie wp�ywaj� bezpo�rednio na wygl�d dokumentu, lecz cechy kt�re podaj�, s� r�wnie wa�ne. Chocia� nie s� one wymagane, warto je stosowa�, poniewa� mo�e to np. pom�c w odszukaniu strony przez wyszukiwarki sieciowe. Ka�dy dokument powinien zawiera� obowi�zkowo przynajmniej deklaracj� strony kodowej, bez kt�rej polskie litery na stronie mog� zosta� b��dnie wy�wietlone! W pojedynczym dokumencie znajduje si� zwykle kilka znacznik�w - ka�dy dotyczy innej wiadomo�ci - wszystkie musz� znajdowa� si� wewn�trz nag��wka strony (...). Ponadto w tym rozdziale opisane zostan� r�wnie� inne przydatne znaczniki, kt�re mo�na umie�ci� w nag��wku dokumentu, opisuj�ce sam dokument, a nie wy�wietlaj�ce jakie� tre�ci.

Oczywi�cie nie ma obowi�zku stosowania dok�adnie wszystkich atrybut�w BODY oraz META, kt�re zosta�y przedstawione w tym rozdziale. Autor strony powinien sam wybra� te, kt�re mu odpowiadaj� lub przekazuj� wed�ug niego wa�ne informacje. Jednak nigdy nie nale�y zapomina� o wstawianiu deklaracji strony kodowej, natomiast podanie tytu�u strony jest wr�cz obowi�zkowe! Zaleca si� r�wnie� wpisanie opisu zawarto�ci strony oraz wyraz�w kluczowych.

Wi�kszo�� edytor�w (X)HTML posiada specjalne generatory sekcji BODY oraz META, w kt�rych podaje si� wszystkie atrybuty oraz informacje dotycz�ce dokumentu, dzi�ki czemu nie trzeba tego robi� r�cznie. Z takiego generatora mo�esz skorzysta� r�wnie� tutaj.

kurs by kurshtml

Niedziela 3 Padziernik

Nag��wek i tre�c - ca�y kurs w jednym po�cie

1. Nag��wek i Tre�� - Wst�p

Sobota 2 Padziernik

Jak zrobi� dobr� stron�

Na koniec chcia�bym poruszy� bardzo wa�n� spraw�, o kt�rej wiele os�b zdaje si� zapomina�. Znajomo�� podstaw HTML w zupe�no�ci wystarcza do napisania strony internetowej, lecz aby stworzy� dobry serwis, kt�ry b�dzie cz�sto odwiedzany i kt�rym b�dzie si� mo�na naprawd� pochwali�, trzeba czego� wi�cej:

Zastan�w si� dobrze nad tematyk� swojej strony. Oczywi�cie nikt nie zabroni Ci publikacji informacji o tym, �e np. Tw�j pies wabi si� Azor, a kot - Mruczek, ale czy co� takiego naprawd� mo�e przyci�gn�� czytelnik�w? Nie zapominaj, �e wiele os�b ��czy si� z Internetem za pomoc� modemu, p�ac�c za ka�d� minut� sp�dzon� w sieci, wi�c czy kto� b�dzie traci� czas na czytanie takich informacji? Postaraj si� znale�� temat, kt�ry Ci� interesuje, jest oryginalny i mo�e zaciekawi� innych. Zwykle lepsze rezultaty przynosi skupienie si� na jednej dziedzinie, ni� opisywanie wszystkiego po troch�.
Uwa�aj z doborem kolor�w na stronie, zw�aszcza je�li chodzi o t�o oraz tekst. Nieciekawe lub ra��co z�e zestawienie barw jest najwa�niejszym czynnikiem, kt�ry zdradza, �e autor serwisu jest kompletnym amatorem. Wyobra� sobie co pomy�l� np. klienci jakiej� firmy, kt�ra posiada�aby stron� z zielonym t�em i czerwonym tekstem (lub co gorsze odwrotnie)! Unikaj jak ognia jaskrawych odcieni w tle. Je�li nie masz pomys�u, ustal bia�e t�o i czarny tekst - tak jest najbezpieczniej. Dobre rezultaty daj� r�wnie� barwy ca�kiem ciemne lub delikatne pastelowe (jasne). T�o w �adnym razie nie mo�e pogarsza� czytelno�ci strony, dlatego nale�y pami�ta� o doborze odpowiedniego koloru tekstu.
Nie przesadzaj z grafik�. Fakt, �e wiesz jak wstawi� na stron� obrazek nie oznacza, �e musi si� od nich roi�. Pami�taj, �e to w�a�nie grafika najbardziej wp�ywa na szybko�� adowania strony, dlatego ogranicz jej ilo�� oraz rozmiary. Je�li ju� musisz co� umie�ci�, postaraj si�, aby by�o to naprawd� dobrej jako�ci. Tworz�c samodzielnie obrazy, u�ywaj antialiasingu, czyli wyg�adzania poszarpanych kraw�dzi. Cech� po kt�rej na pierwszy rzut oka mo�na rozpozna� dobrego projektanta jest oszcz�dne i umiej�tne operowanie grafik�, kt�ra dobrze komponuje si� z wygl�dem strony.
Przyjrzyj si� innym renomowanym witrynom. Zwr�� uwag� na projekt szaty graficznej. Du�o nie zawsze znaczy dobrze. Czasem bardziej oszcz�dna forma wygl�da lepiej - a przede wszystkim czytelniej - ni� wyszukane ozdobniki. Najwa�niejszy jest dobry pomys�. Pami�taj, �e kolorystyka witryny oraz projekt oprawy graficznej to pierwsze rzeczy, na kt�re zwracaj� uwag� u�ytkownicy. Je�li si� nie postarasz, Twoja strona ju� na wst�pie b�dzie m�wi�a: "Tutaj nie ma nic godnego uwagi, mo�esz opu�ci� to miejsce". Wi�kszo�� dobrych stron w Internecie zbudowana jest nast�puj�co: na g�rze znajduje si� banner lub logo serwisu, po lewej lub po prawej - menu, a obok - tre�� strony. Nie znaczy to, �e musisz koniecznie podporz�dkowa� si� takiemu kanonowi, lecz je�eli chcesz uzyska� podobn� struktur�, we w�a�ciwej tre�ci strony (BODY) wpisz np.:
Zaznacz kod

Spoiler:

Tutaj mo�na umie�ci� logo serwisu

Tu umieszcza si� odsy�acze spisu tre�ci
Tu wpisuje si� tre�� strony

a otrzymamy:

Tutaj mo�na umie�ci� logo serwisu
Tu umieszcza si� odsy�acze spisu tre�ci Tu wpisuje si� tre�� strony
Nawigacja w serwisie to bardzo wa�na sprawa. Nieczytelny uk�ad strony, menu w kt�rym trudno cokolwiek znale�� i inne podobne historie s� cz�st� przyczyn� zniech�cenia u�ytkownik�w, kt�rzy w konsekwencji opuszczaj� witryn�. Przy projektowaniu systemu odsy�aczy spr�buj wczu� si� w spos�b my�lenia internaut�w. Pami�taj, �e nie znaj� oni serwisu tak dobrze jak Ty i mog� nie chcie� zag��bia� si� w szczeg�y. Dlatego warto w widocznym miejscu umie�ci� hiper��cza do najciekawszych dzia��w, jaki� system wyszukiwania lub indeks. W przypadku obszerniejszych witryn wskazane jest podzielenie ich na dzia�y tematyczne. Spos�b nawigacji powinien by� przede wszystkim wygodny, praktyczny, logiczny i �atwo dost�pny.
Dbaj o poprawno�� ortograficzn� i stylistyczn� tekstu. Naucz si� zasad wpisywania znak�w interpunkcyjnych. Je�li na stronie WWW wyst�puje masa b��d�w, prawdopodobnie autor nie ma nic wa�nego do przekazania.
Postaraj si� na bie��co aktualizowa� tre�� strony i usuwa� powsta�e b��dy. Udoskonalaj opraw� graficzn� oraz system nawigacji, aby serwis nie sta� si� nudny. Informuj o wprowadzanych nowo�ciach i utrzymuj kontakt listowny z u�ytkownikami. Otw�rz si� na konstruktywn� krytyk�.

Je�eli masz jakie� zastrze�enia co do tego serwisu, wiesz jak mo�na zrobi� co� lepiej, napisz do mnie
Szablony WWW

Istnieje spos�b na zrobienie profesjonalnie wygl�daj�cej strony nawet bez du�ego do�wiadczenia - s� to szablony WWW. Wiele serwis�w internetowych oferuje darmowo gotowe projekty graficzne witryn. Zawieraj� one ca�� struktur� dokumentu oraz wszystkie potrzebne grafiki. Jedyne co trzeba zrobi� samodzielnie, to uzupe�ni� szablon w�asnym tekstem w odpowiednich miejscach. Je�li nie masz zatem pomys�u na projekt graficzny swojego serwisu, radz� poszuka� ciekawego szablonu w sieci. Dzi�ki temu Twoja strona na pewno nie b�dzie "straszy�a" internaut�w ;-)

Radz� jednak uwa�a� przy korzystaniu z takich rozwi�za�. Niekt�re szablony wygl�daj� nawet bardzo dobrze, ale s� tak prze�adowane grafik�, �e wczytywanie takiej strony mo�e potrwa� bardzo d�ugo. Dodatkowo szczeg�lnie je�li korzystasz z obcoj�zycznych szablon�w, nale�y sprawdzi� spos�b kodowania znak�w. W nag��wku ka�dej strony HTML musi znajdowa� si� linijka:

Spoiler:
(zobacz: Ramy dokumentu). Brak podobnej linijki w nag��wku strony albo istniej�ce wpisy typu:

Spoiler:
s� powa�nym b��dem, kt�ry spowoduje niepoprawne wy�wietlanie polskich znak�w w przegl�darce!

Adresy stron z darmowymi szablonami WWW mo�esz znale�� w serwisach:

SiteQL.net
Tymex.org
Webdiary.pl
Webinside
Webmade.org
Webmaster.Mocny.Com
WebPL.org
Xklonos
Spoiler:
Je�eli nie chcesz korzysta� z gotowych rozwi�za�, przy tworzeniu w�asnego szablonu WWW pomo�e Ci generator zamieszczony tutaj.
http://www.kurshtml.boo.pl/generatory/autoszablon.html

Sobota 2 Padziernik

Odsy�acz obrazkowy

Wszystkie odsy�acze przedstawione do tej pory, mia�y posta� tekstow�. Je�li chcesz umie�ci� w swoim serwisie np. menu z obrazkowymi przyciskami, nale�y w tym celu u�y� nast�puj�cego polecenia:

Spoiler:

gdzie jako "adres" mo�na poda�:
wzgl�dn� �cie�k� dost�pu do dowolnej podstrony Twojego serwisu (np.: index.html),
adres internetowy poprzedzony przez "http://" (np.: http://www.onet.pl),
adres poczty elektronicznej poprzedzony przez "mailto:" (np.: mailto:jan_kowalski@example.com).
Natomiast zamiast: "Tu podaj wzgl�dn� �cie�k� dost�pu do obrazka" nale�y poda� lokalizacj� na dysku, gdzie znajduje si� ��dany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje si� kr�tk� informacj�, kt�ra pojawi si� w przypadku, kiedy obrazek nie zostanie wy�wietlony.

Jak wida� odsy�acza obrazkowego mo�emy u�y� w po��czeniu z dowolnym typem odno�nik�w (do podstrony, do adresu internetowego lub pocztowy). Jednak najcz�ciej w ten spos�b tworzy si� menu nawigacyjne serwisu (odsy�acze do podstron).

Obrazki przycisk�w najlepiej zapisywa� w formacie GIF. Je�li nie masz zaci�cia artystycznego, nie musisz samodzielnie rysowa� wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie mo�esz darmowo pobra� gotowe przyciski.

kurs by kurshtml

Sobota 2 Padziernik

Odsy�acz pocztowy

Spoiler:
opis odsy�acza

Zamiast: "adres poczty e-mail" nale�y wpisa� adres poczty elektronicznej (np.: jan_kowalski@example.com).
Ten odsy�acz jest przydatny, gdy pragniesz umie�ci� na stronie adres swojej skrzynki poczty elektronicznej (e-mail). Dzi�ki temu b�dziesz w sta�ym kontakcie z internautami odwiedzaj�cymi Twoj� stron�.

Pami�taj, �e podanie swojego adresu na stronie WWW, mo�e spowodowa�, �e zaczn� do Ciebie przychodzi� niechciane wiadomo�ci - reklam�wki (tzw. spam). Dobrym pomys�em mo�e by� za�o�enie sobie darmowego konta pocztowego w dowolnym portalu internetowym i podanie adresu takiego konta na swojej stronie - darmowe konto zawsze mo�na zmieni�. Zak�adaj�c stron� WWW na darmowym serwerze, cz�sto dostajemy r�wnie� konto e-mail. Wtedy mo�na z niego skorzysta�.

Sobota 2 Padziernik

Odsy�acz do adresu internetowego

(w obr�bie ca�ego Internetu)

U�ytkownika mo�na odsy�a� r�wnie� do cudzych stron, a nie tylko do w�asnych i nie jest to w �aden spos�b �amanie praw autorskich (je�li nie podpiszemy si� jako autorzy takiej strony :-) - przeciwnie - jest do darmowa reklama dla strony, do kt�rej nast�puje odwo�anie.

Sk�adnia odsy�acza do adresu internetowego (w obr�bie ca�ego Internetu) jest nast�puj�ca:

Spoiler:
opis odsy�acza

Zasady wpisywania "opisu odsy�acza" s� takie same jak w przypadku odsy�acza do podstrony.
Natomiast jako: "adres internetowy" nale�y wpisa� adres miejsca w Internecie, gdzie chcemy si� przenie�� (np.: http://www.onet.pl).
Adres strony internetowej zawsze musi rozpoczyna� si� od http://

Odsy�acz taki jest przydatny, je�li chcemy umie�ci� w swoim serwisie tzw. linki do dowolnych stron w obr�bie ca�ego Internetu. Je�li surfuj�c w sieci, trafimy na jak�� ciekaw� stron�, mo�emy skopiowa� jej adres (z paska adresu przegl�darki) i umie�ci� w odsy�aczu. Dzi�ki temu wszyscy u�ytkownicy odwiedzaj�cy nasz� witryn�, b�d� mogli przenie�� si� bezpo�rednio do wskazanej strony, bez potrzeby wpisywania jej adresu.

kurs by kurshtml

Sobota 2 Padziernik

Odsy�acz do podstrony

(w obr�bie tego samego serwisu)

Praktycznie na ka�dej stronie WWW spotyka si� odsy�acze (inaczej: odno�niki lub hiper��cza). Najcz�ciej stanowi je specjalnie wyr�niony kr�tki tekst (lub obrazek), po klikni�ciu kt�rego, nast�puje przeniesienie do innej strony. Tak jak ka�da ksi��ka sk�ada si� z rozdzia��w, tak samo serwisy internetowe sk�adaj� si� zwykle z podstron. Ka�da podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera tre��, kt�ra do�� znacznie r�ni si� tematycznie od pozosta�ych (tworzy si� j� w taki sam spos�b jak stron� g��wn�). Taka organizacja u�atwia u�ytkownikowi nawigacj� oraz zapobiega niepotrzebnemu wczytywaniu ca�ego serwisu od razu (co trwa�oby prawdopodobnie bardzo d�ugo). Umieszczenie wszystkiego w jednym pliku (index.html), absolutnie nie jest wskazane (chyba �e Twoja strona jest naprawd� kr�tka)!

Aby umo�liwi� u�ytkownikowi swobodne przechodzenie pomi�dzy podstronami naszego serwisu, trzeba je w jaki� spos�b po��czy� mi�dzy sob�. Nale�y umie�ci� w wybranym miejscu odsy�acze do wszystkich podstron. Zwykle przeznacza si� na to osobn� stron�, kt�ra stanowi spis tre�ci i zawiera u�o�one kolejno odsy�acze do wszystkich podstron serwisu.

Sk�adnia odsy�acza do podstrony (w obr�bie tego samego serwisu) jest nast�puj�ca:

Spoiler:
opis odsy�acza

Zasady wpisywania �cie�ki dost�pu s� takie same jak w przypadku obrazk�w.
Natomiast zamiast: "opis odsy�acza", nale�y wpisa� kr�tki tekst, kt�ry pojawi si� na ekranie i po klikni�ciu kt�rego nast�pi przej�cie do podanej podstrony (adres strony jest widoczny tylko w pasku statusu przegl�darki).
Za pomoc� tego typu odsy�acza mo�na si� odnosi� do dowolnego pliku znajduj�cego si� na koncie FTP razem ze stron�. Dzi�ki temu mo�na zbudowa� dzia� download, tzn. odsy�acze do pobierania plik�w.

kurs by kurshtml

Sobota 2 Padziernik

Wy�rodkowanie obrazka

Spoiler:

kurs by kurshtml

18. HTML Dla Zielonych - Ustawienie obrazka

Sobota 2 Padziernik

Ustawienie obrazka

Spoiler:

gdzie zamiast: "Tu podaj wzgl�dn� �cie�k� dost�pu do obrazka" nale�y poda� lokalizacj� na dysku, gdzie znajduje si� ��dany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje si� kr�tk� informacj�, kt�ra pojawi si� w przypadku, kiedy obrazek nie zostanie wy�wietlony.
Natomiast jako: "ustawienie" nale�y wpisa�:
left
Obrazek b�dzie ustawiony po lewej stronie wzgl�dem otaczaj�cego go tekstu
right
Obrazek po prawej stronie wzgl�dem tekstu
Przyk�ad:

align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left", align="left"...

align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right", align="right"...

kurs by kurshtml

17. HTML Dla Zielonych - Wstawianie obrazka

Sobota 2 Padziernik

Wstawienie obrazka

Spoiler:

Zamiast tekstu: "Tu podaj wzgl�dn� �cie�k� dost�pu do obrazka", nale�y poda� miejsce na dysku, gdzie znajduje si� nasz obrazek, kt�ry chcemy umie�ci� na stronie. Je�eli obrazek znajduje si� w tym samym katalogu co strona, na kt�rej chcemy go wstawi�, wystarczy wpisa� tutaj sam� nazw� pliku obrazka, nie zapominaj�c przy tym o podaniu rozszerzenia (".jpg" lub ".gif").
Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje si� kr�tk� informacj�, kt�ra pojawi si� w przypadku, kiedy obrazek nie zostanie wy�wietlony (np. je�li u�ytkownik wy��czy wy�wietlanie grafiki w swojej przegl�darce internetowej).
UWAGA!
Znacznik nie posiada w jezyku HTML znacznika zamykaj�cego!

Przyk�ad:

Poni�ej znajdziesz przyk�ady poprawnych �cie�ek dost�pu, dla r�nych struktur katalog�w na dysku. We wszystkich przypadkach naszym zamiarem b�dzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drog� "przej�cia" zaznaczono kolorem czerwonym i strza�kami. Przy tworzeniu �cie�ki zawsze "startujemy" od strona.html i zmierzamy do plik.gif. Plik index.html stanowi stron� g��wn�, kt�r� si� teraz nie zajmujemy.

1. Poprawnie: plik.gif
Niepoprawnie: C:\www\plik.gif, plik.GIF, plik

Jak wida� obrazek plik.gif oraz dokument strona.html znajduj� si� w tym samym katalogu. Nie ma przy tym znaczenia czy oba pliki s� w katalogu g��wnym serwisu czy w jakim� podkatalogu - �cie�ka dost�pu jest taka sama. W takim przypadku wystarczy poda� nazw� pliku bez �adnych dodatk�w. Jest to najprostsza struktura katalog�w (szczeg�lnie pierwsza - wszystko w jednym katalogu). Stosuje si� j� szczeg�lnie w serwisach sk�adaj�cych si� z niewielu podstron. Je�li masz problemy ze swobodnym tworzeniem bardziej skomplikowanych �cie�ek dost�pu, polecam Ci w�a�nie ten model, poniewa� mo�liwo�� pomy�ki jest tutaj naprawd� niewielka.

2. Poprawnie: katalog/plik.gif
Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik

W przypadku kiedy plik.gif znajduje si� w jakim� podkatalogu, a dokument strona.html nie, przed nazw� pliku trzeba poda� nazw� tego podkatalogu oraz uko�nik (zwyk�y, nie odwr�cony!). Taka struktura jest stosowana np. gdy mamy du�o plik�w (np. zdj��) i dla utrzymania porz�dku chcemy je trzyma� w osobnym podkatalogu.

3. Poprawnie: ../plik.gif
Niepoprawnie: C:\www\plik.gif, katalog/plik.gif, ..\plik.gif, ../plik.GIF, ../plik

Sytuacja analogiczna jak poprzednio, lecz teraz plik.gif jest w katalogu g��wnym, a strona.html w podkatalogu. W takim przypadku przed nazw� pliku trzeba wstawi� ../ co oznacza "wyj�cie" do katalogu nadrz�dnego, czyli z katalog/ do www/ Struktura przydatna w przypadku wielu dzia��w w serwisie, z kt�rych ka�dy sk�ada si� z du�ej ilo�ci podstron umieszczonych w osobnych katalogach.

4. Poprawnie: ../katalog2/plik.gif
Niepoprawnie: C:\www\katalog2\plik.gif, katalog2/plik.gif, ..\katalog2\plik.gif, ../katalog2/plik.GIF, ../katalog2/plik

Jest to nieco zmodyfikowany poprzedni wariant. Teraz r�wnie� plik.gif znajduje si� w podkatalogu - podobnie jak strona.html z tym, �e s� to dwa r�ne katalogi. Budowanie �cie�ki w tym przypadku rozpoczynamy w podkatalogu o nazwie katalog1/, w kt�rym znajduje si� nasza strona.html. Nast�pnie wychodzimy do katalogu nadrz�dnego www/ co jest realizowane przez wstawienie ../ na pocz�tku �cie�ki dost�pu. Teraz mo�emy swobodnie wej�� do drugiego podkatalogu katalog2/ (realizuje si� to przez podanie jego nazwy), w kt�rym znajduje si� nasz plik.gif, a na ko�cu - jak zawsze - podajemy nazw� pliku. Struktura przydatna w przypadku wielu dzia��w w serwisie oraz du�ej ilo�ci plik�w. Wtedy w katalogu g��wnym znajduje si� zazwyczaj jedynie strona g��wna index.html, a wszystkie podstrony oraz pliki s� umieszczone w katalogach podrz�dnych.

5. Poprawnie: ../../katalog2/katalog2a/plik.gif
Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif

Ten przyk�ad jest ju� do�� zaawansowany. Je�li go zrozumiesz, mo�esz powiedzie�, �e �cie�ki dost�pu "masz w ma�ym palcu" :-)
"Znajdujemy si�" w katalogu: katalog1a/ (bo tutaj jest nasza strona, na kt�rej chcemy wstawi� obrazek). Pierwsze dwie kropki w �cie�ce dost�pu powoduj� wyj�cie o jeden poziom wy�ej - czyli do katalogu: katalog1/. Kolejne dwie kropki odpowiadaj� za wyj�cie o nast�pny poziom wy�ej, czyli do katalogu: www/. Teraz mo�emy ju� wej�� do katalogu podrz�dnego: katalog2/, a potem do: katalog2a/, kt�ry znajduje si� wewn�trz niego. Na ko�cu wystarczy poda� nazw� pliku.

Powy�sze sposoby podawania �cie�ki dost�pu obowi�zuj� dla wszystkich rodzaj�w plik�w - r�wnie� dla podstron. Cz�stym b��dem pope�nianym przez osoby pocz�tkuj�ce, jest podanie bezwzgl�dnej �cie�ki dost�pu, np.:

C:\www\katalog2\katalog2a\plik.gif (B��D!)
Jest to karygodny b��d!!! Po wprowadzeniu strony do Internetu, zostaje ona zapisana na dysku komputera-serwera (nie na Twoim). Struktura (wygl�d) drzewa katalog�w b�dzie tam z ca�� pewno�ci� inna ni� na Twoim dysku lokalnym. Dlatego podana �cie�ka bezwzgl�dna tam nie istnieje. Co gorsze, b��du mo�esz nie wykry� od razu, poniewa� na Twoim komputerze obrazek wczyta si� poprawnie, ale ju� znajomy nic nie zobaczy! Zauwa� r�wnie�, �e w �cie�kach u�ywamy uko�nik�w ("/"), a nie odwr�conych uko�nik�w ("\").

Jest jeszcze jeden rodzaj powa�nego b��du:

Obie �cie�ki wygl�daj� poprawnie, ale s� absolutnie niedopuszczalne! Nie wolno wstawia� do dokumentu plik�w z innego dysku. W og�le nie mo�na si� odwo�ywa� do plik�w, kt�re znajduj� si� "powy�ej" katalogu g��wnego serwisu - u nas jest to www/ (katalog g��wny serwisu mo�na rozpozna� po tym, �e bezpo�rednio w nim znajduje si� strona g��wna index.html).

Pami�taj: stosuj zawsze wzgl�dne, a nie bezwzgl�dne �cie�ki dost�pu! U�ywaj r�wnie� zwyk�ych, a nie odwr�conych uko�nik�w. Wszystkie pliki Twojej strony powinny znajdowa� si� w obr�bie katalogu g��wnego serwisu, w �adnym razie powy�ej niego!

Niekt�re edytory HTML umo�liwiaj� automatyczne wstawienie wzgl�dnej �cie�ki dost�pu (dopiero po zapisaniu strony na dysku), poprzez wybranie pliku w specjalnym selektorze. Dzi�ki temu tworzenie zawi�ych �cie�ek, mo�e by� du�o �atwiejsze.
Z takiego generatora mo�esz skorzysta� r�wnie� tutaj.

Przy okazji zwracam uwag�, �e strona startowa index.html (patrz powy�ej) musi znajdowa� si� w g��wnym katalogu publicznym na serwerze. Podczas umieszczania strony w Internecie, na serwer wysy�amy wszystkie pliki znajduj�ce si� w katalogu www/, ale nie sam katalog. index.html musi bezwzgl�dnie znajdowa� si� w katalogu g��wnym na Twoim koncie WWW, w przeciwnym razie Twoja strona w og�le si� nie wy�wietli! Podczas umieszczania strony w Internecie, nie zapomnij przekopiowa� na serwer r�wnie� wszystkich plik�w obrazk�w!

UWAGA!
Bardzo wa�ne: w nazwach plik�w lepiej nie u�ywa�:
wielkich liter
znak�w, np.: \ / : * ? " < > |
spacji (je�li musisz, w zamian u�ywaj podkre�lnika "_")
polskich liter (�, �, �, �, �... itd.)
Je�li nie zastosujesz si� do tych zalece�, mo�e si� okaza�, �e po wprowadzeniu strony do Internetu, pliki takie nie wczytaj� si� (nawet je�li na Twoim komputerze wszystko jest w porz�dku)!

Na koniec jeszcze jedna rada: obrazki wstawione na stron�, wydatnie zwi�kszaj� jej obj�to��, a co za tym idzie, wyd�u�aj� czas wczytywania strony. Je�li na Twoim dysku lokalnym strona wczytuje si� b�yskawicznie, nie my�l, �e b�dzie tak samo po wprowadzeniu jej do Internetu. Oczywi�cie im wi�kszy jest obrazek, tym wi�cej miejsca zajmuje na dysku. Poza tym zbyt wiele nieprzemy�lanej grafiki tylko zaciemnia tre��. Dlatego staraj si� z tym nie przesadza�. Nale�y r�wnie� pami�ta�, aby najlepiej wszystkie obrazki by�y zapisane w jednym z trzech format�w:

GIF - dla rysunk�w sk�adaj�cych si� z mniej ni� 256 kolor�w, np. przyciski menu i inne "r�cznie" rysowane ozdobniki. Format ten obs�uguje przezroczysto��.
JPG - dla zdj�� wielokolorowych. Nie obs�uguje przezroczysto�ci.
PNG - pozwala zapisywa� z bardzo dobr� jako�ci� zar�wno r�cznie rysowane grafiki jak i zdj�cia. Obs�uguje kompresj� oraz zar�wno pe�n� przezroczysto�� jak i p�przezroczysto��. Niestety zw�aszcza ta ostatnia w�asno�� mo�e nie by� interpretowana przez starsze przegl�darki (np. MSIE 6.0).
W �adnym wypadku nie nale�y stosowa� formatu BMP, gdy� nie posiada on �adnej lub bardzo s�ab� kompresj� i w zwi�zku z tym grafika zapisana w tym formacie ma du�o wi�ksz� obj�to��.

Grafik� przydatn� dla stron WWW mo�esz znale�� bezpo�rednio w Internecie. Istnieje wiele serwis�w internetowych dla webmaster�w, oferuj�cych darmowo gotowe przyciski menu i inne przydatne dodatki. Wystarczy troch� poszuka�.

kurs by kurshtml

Sobota 2 Padziernik

Kolor t�a oraz tekstu

Spoiler:

Tu jest w�a�ciwa tre�� strony

Zamiast wyraz�w "kolor t�a" oraz "kolor tekstu" nale�y wpisa� definicj� koloru odpowiednio: t�a strony oraz tekstu na ca�ej stronie. Robi si� to tak samo jak w przypadku czcionek.
Je�li chcemy ustali� kolor t�a oraz tekstu na ca�ej stronie mo�emy u�y� dodatkowych atrybut�w dla znacznika . Atrybuty te (bgcolor="..." oraz text="...") nie wpisujemy w miejscu w�a�ciwej tre�ci strony - tak jak w przypadku znacznik�w - lecz wewn�trz znacznika otwieraj�cego (przed w�a�ciw� tre�ci�) - tak jak pokazano powy�ej - poniewa� nie s� one oddzielnymi znacznikami tylko atrybutami. Nale�y r�wnie� pami�ta�, �e na stronie mo�e si� znajdowa� tylko jeden znacznik . Wszystkie atrybuty kt�re si� do niego odnosz� (jak na przyk�ad dwa powy�sze), wpisuje si� do tego samego znacznika (otwieraj�cego), a nie wstawia si� nowego w innym miejscu strony.

Kolor t�a oraz tekstu ca�ej strony powinni�my ustala� zawsze jednocze�nie.

Nawet je�li ustalimy kolor tekstu na ca�ej stronie, mo�emy go p�niej lokalnie (miejscowo) zmienia� za pomoc� polecenia ... http://www.programming.pun.pl/viewtopic.php?id=19

kurs by kurshtml

Sobota 2 Padziernik

��czenie parametr�w

Wszystkie powy�sze parametry (atrybuty i znaczniki) dotycz�ce tekstu mo�na ��czy�, np. po wpisaniu w edytorze:

Spoiler:

To jest jaki� tekst

otrzymamy:

To jest jaki� tekst

Zauwa�, �e znaczniki zamykamy w kolejno�ci odwrotnej jak je otwierali�my. Czyli najpierw zamykamy znacznik, kt�ry zosta� otwarty jako ostatni (w naszym przyk�adzie jest to: ), a na ko�cu zamykamy ten znacznik, kt�ry otworzyli�my jako pierwszy (czyli

).

Dodatkowo atrybuty odnosz�ce si� do tego samego znacznika (w naszym przypadku jest to znacznik ), mo�na po��czy�, wypisuj�c je po kolei, rozdzielone spacjami (w naszym przypadku s� to atrybuty: size="5", color="red" oraz face="Courier New"). Kolejno�� wpisywania zar�wno atrybut�w jak i znacznik�w (otwieraj�cych) jest dowolna.

kurs by kurshtml

Tutaj mo�na umie�ci� logo serwisu
Tu umieszcza si� odsy�acze spisu tre�ci	Tu wpisuje si� tre�� strony