Programowanie

do Adminow

Niedziela 26 Luty

witam was serdecznie.
Widze forum walczy ostro :) postow jest troche. Reklam jeszcze wiecej. Stopa po edycie.
Ale kurs dla zielonych to naprawde dla zielonych :) wpisane jest wszystko co mozna zamiescic w jednym temacie.
Wszyskie Kodowania proste jak diabli. Dostepne na kazdym forum. Zakladasz watek i masz wszystkie komendy.
Zakladacie dzialy z jedna komenda. Zeby zapudrowac forum. Ze niby 200 tematow i 400 postow. Ok. Ale userow 7 nie licz mnie ja tylko wpadlem na chwile :)
po drugie adminie. Forum ci zawisnie przy 50 online na bank error wyskoczy lub time out :)
po drugie. Nie mozna kopiowac wszystkiego z internetu jest to zakazane.
Wiekszosc jest zerznieta z google jak ta lalal. Potrafie nawet wzkazac, miejsca.
Nie znacie sie na HTML CSS PHPBB itp. Bo w domysle logo stoji na forum stylu PHPBb bo na bank w domysle mieliscie takie logo zmien i dopasuje je i wstaw. A to tak wyglada ze ******** nie mysl ze ktos sie lapnie na to ze forum webmasterskie jest he. Postaw hosta,server,kup domene i rob forum o czym masz pojecie. Nara

World of Warcraft

Czwartek 7 Styczeń

Je�li przestanie dzia�a�, prosz� o zg�oszenie poni�ej w po�cie, ja lub inny u�ytkownik dodamy now� wersje. Z g�ry dzi�kuje.

World of Warcraft

Pištek 1 Styczeń

Aktualna wersja: 5.0.4.9A

Funkcje WEH

Goto Location ``(tzw. teleport hack)
Goto Spirit Healer ``(teleportuje ci� do najbli�szego Spirit Healera)
Goto Corpse ``(teleportuje ci� do twojego cia�a)
Speedhacking ``(wiadomo)
Trackings ``(mo�na wybra� z tabeli mn�stwo opcji, np. pokazywanie z�� r�nych metali do Mining)
Wall Climb ``(mo�liwo�ci wspinania si� po g�rach)
No fall damage ``(nie odejmuje ci hp po upadku z du�ej wysoko�ci)
Teleport to Plane ``(teleportuje ci� do najbli�szego statku)
Flymode ``(mo�liwo�� latania)
Walk on Water ``(chodzenie po wodzie)
Hyper mode ``(co� jak speedhack, mo�e spowodowa� zawieszenie komputera)
P2P teleports ``(ustawianie teleport�w na hotkeye)
Allow Model Hacks ``(mo�esz si� zamieni� w cokolwiek chcesz, widzialne tylko u ciebie na komputerze)
Gravity Control ``(skaczesz wy�ej, nie dzia�a na wersji WoW'a 3.0.3 i wy�ej)
Change Model Size ``(edytowanie rozmiar�w postaci)
Air Jump ``(mo�esz skaka� w powietrzu)
Faction ``(pozwala na zmienienie twojego Faction ID, b�dziesz m�g� atakowa� swoj� ras�)
Rosetta Stone ``(rozumiesz ka�dy j�zyk)

Zaznaczanie Clienta

* Po zalogowaniu si� na posta� odpal WEH.
* Zaznacz w "Process ID" tw�j numer PID WoW'a
* Cheatuj :)

Spoiler:
http://www.sendspace.pl/file/9d81af792f806a0262c301e

Spoiler:
http://virusscan.jotti.org/pl/scanresult/e0ba269ca946ece235410171f37853c40ffec221/1be480e80be1111c564ee4054e4db6da1df7e7eb

Dodatkowe lekcje

Czwartek 3 Grudzień

Wi�cej o CSS znajdzieci� pod tym adresem:

Spoiler:
http://www.kurshtml.boo.pl/css/index.html

Czwartek 3 Grudzień

Lekcja 16: Standardy WWW i sprawdzanie poprawno�ci

W3C jest skr�tem od World Wide Web Consortium, co jest niepodleg�� organizacj� kt�ra zarz�dza standardem kod�w w internecie (np. HTML, CSS, XML oraz inne). Microsoft, The Mozilla Foundation oraz inne s� cz�ci� W3C i zgadzaj� si� co do przysz�ego rozwoju standard�w.

Je�eli ju� troch� pracowa�e� przy tworzeniu stron internetowych, prawdopodobnie wiesz ju� �e mog� istnie� wielkie r�nice w sposobie prezentacji strony zale�nie od przegl�darki. Bardzo frustruj�ce i czaso ch�onne mo�e by� rozwi�zywanie problem�w zwi�zanych w�a�nie z tymi r�nicami powsta�ymi w zale�no�ci jakiej przegl�darki u�ywasz. Na przyk�ad Mozilli, Internet Explorera, Opery lub ca�kiem innej przegl�darki.

Idea standard�w pozwoli u�atwi� prac� z technologiami internetowymi. To oznacza �e obserwuj�c standardy, programista internetowy zdaje sobie spraw� z odpowiedniego zachowania si� jego stron nie zale�nie od platformy na kt�rej pracuje u�ytkownik. Tak wi�c sugerujemy aby� sprawdzi� zgodno�� swojego kodu CSS ze standardem powszechnie stosowanym w internecie.
Walidator CSS

Aby u�atwi� obserwacj� standard�w CSS, W3C stworzy�o tak zwany walidator kt�ry czyta tw�j arkusz styl�w i zwraca list� ostrze�e� oraz b��d�w zwi�zany z twoim kodem CSS.

Aby u�atwi� ci walidacj� arkusza styl�w, mo�esz zrobi� to prosto z tej strony. Po prostu zamie� adres URL poni�ej na adres twojego arkusza styl�w i kliknij na przycisk. Zostaniesz poinformowany przez stron� W3C o wszystkich znalezionych b��dach.

Je�eli walidator nie znajdzie b��d�w; poka�e si� ten obrazek, kt�ry mo�esz umie�ci� na swojej stronie aby pokaza� innym �e tw�j kod jest zgodny ze standardami:

Poprawny CSS!

Dodatkowy walidator mo�esz znale�� pod tym adresem: http://jigsaw.w3.org/css-validator/

Czwartek 3 Grudzień

Lekcja 15: Warstwy na warstwach a w�a�ciwo�� z-index

CSS operuje w trzech wymiarach - wysoko�ci, szeroko�ci oraz g��boko�ci. Zapoznali�my si� z dwoma. W tej lekcji, nauczymy si� jak uczyni� r�ne elementy warstwami. W skr�cie, om�wimy kolejno�� nak�adaj�cych si� na siebie element�w.

Do tego celu, ka�demu elementowi mo�esz nada� numer (z-index). Reg�a jest nast�puj�ca: elementy z wy�szym numerem nak�adaj� si� na elementy z ni�szym numerem.

Powiedzmy �e gramy w pokera i mamy Pokera Kr�lewskiego. Ka�da z kart w tym wypadku ma sw�j z-index:

Poker kr�lewski

W tym przypadku, liczby wykorzystali�my kolejne liczby (1-5) ale ten sam resultat uzyskamy poprzez u�ycie 5 innych liczb. Najwa�niejsza jest tylko kolejno�� chronologiczna liczb (wielko��).

Kod w przyk�adzie z kartami mo�e wygl�da� nast�puj�co:

#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}

#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}

#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}

#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}

#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}

* Poka� przyk�ad

Metoda jest bardzo prosta ale mo�liwo�ci jest wiele. Mo�esz umie�ci� obrazki na tek�cie, lub nad tekstem itd.
Podsumowanie

Warstwy mog� zosta� u�yte w wielu sytuacjach. Na przyk�ad, spr�buj u�y� z-index do tworzenia efekt�w w nag��wkach zamiast wykorzystywania w�a�ciwo�ci wraz z grafik�. Jeszcze jedna rzecz, pami�taj �e tekst �aduje si� najszybciej, i mo�e dostarczy� najwy�sz� rang� w wyszukiwarkach internetowych.

Czwartek 3 Grudzień

Lekcja 14: Pozycjonowanie element�w

Dzi�ki pozycjonowaniu w CSS, mo�esz umie�ci� element dok�adnie tam gdzie tylko chcesz. Razem z efektem p�ywania (patrz lekcja 13), pozycjonowanie daje ci nieograniczone mo�liwo�ci tworzenia zaawansowanego i precyzyjnego uk�adu na stronie.

Nast�puj�ce rzeczy om�wimy w tej lekcji:

* Zasada pozycjonowania CSS
* Pozycjonowanie absolutne
* Pozycjonowanie relatywne

Zasada pozycjonowania CSS

Wyobra� sobie okno przegl�darki jako zbi�r koordynat�w:

Okno przegl�darki wraz z koordanytami

Zasada pozycjonowania CSS m�wi �e mo�esz umie�ci� element gdziekolwiek chcesz w zbiorze koordynat�w.

Powiedzmy �e chcemy przemie�ci� gdzie� nag��wek. Dzi�ki modelowi blokowemu (patrz lekcja 9) nag��wek pojawi si� nast�puj�co:

Nag��wke w bloku

Je�eli chcesz umie�ci� nag��wek 100px od g�ry oraz 200px od lewej strony obramowania dokumentu, wykorzystaj nast�puj�cy kod CSS:

h1 {
position:absolute;
top: 100px;
left: 200px;
}

Rezultat b�dzie nast�puj�cy :

Nag��wek pozycjonowany w oknie przegl�darki

Jak widzisz, pozycjonowanie CSS jest bardzo precyzyn� technik� uk�adania element�w. Jest to o wiele �atwiejsze ni� wykorzystywanie tabel, prze�roczystych obrazk�w lub czego kolwiek innego.
Pozycjonowanie absolutne

Element pozycjonowany absolutnie nie zabiera miejsca w dokumencie. To oznacza �e jego obezno�� nie zmienia u��zenia innych element�w.

Aby element pozycjonowa� absolutnie, w�a�ciwo�� position ustawiamy na warto�� absolute. Mo�esz nast�pne u�y� w�a�ciwo�ci left, right, top, oraz bottom aby ustawi� pozycj� elementu.

Jako przyk�ad pozycjonowania absolutnego, wybrali�my 4 bloki, ka�dy w jednym rogu dokumentu:

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

* Poka� przyk�ad

Pozycjonowanie relatywne

Aby pozycjonowa� element relatywnie, ustaw w�a�ciwo�� position na warto�� relative. R�nica mi�dzy pozycjonowaniem absolutnym i relatywnym jest taka, �e pozycja jest kalkulowana w inny spos�b.

Pozycja elementu kt�ry jest pozycjonowany relatywnie obliczana jest na podstawie oryginalnej pozycji w dokumencie. To oznacza, �e przesuwasz element w prawo, lewo, d� lub w g�r�. Tym sposobem, element nadal zajmuje miejsce w dokumencie tam gdzie jest jego oryginalna pozycja.

Jako przyk�ad takiego pozycjonowania, spr�bujemy przedstawi� trzy obrazki pozycjonowane relatywnie wzgl�dem ich oryginalnego po�o�enia. Zauwa� jak elementy zostawiaj� puste miejsce w ich oryginalnym po�o�eniu:

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

* Poka� przyk�ad

Podsumowanie

W poprzednich dwuch lekcjach, nauczy�e� si� jak pozycjonowa� i ustawia� p�ywanie element�w. Te dwie metody daj� ci wiele mo�liwo�ci konstruowania twoich stron bez niepotrzebnego wykorzystywania metod w starym stylu (tabele, prze�roczyste obrazki). Zamiast tego wykorzystuj CSS. Jest bardziej precyzyjny, daje wi�cej wygody, i jest o wiele �atwiejszy w utrzymaniu porz�dku.

Czwartek 3 Grudzień

Lekcja 13: Elementy p�ywaj�ce

Elementy mog� ustawi� si� na lewo lub prawo wzgl�dem innych przy wykorzystaniu w�a�ciwo�ci float. M�wi si� �e blok wraz z zawarto�ci� p�ywa na lewej stronie lub na prawej w dokumencie (lub odpowiednim bloku) (patrz do lekcji 9 dla dok�adnego opisu modelu blokowego). Nast�puj�cy rysunek ilustruje zasad�:

Blok p�ywaj�cy na lewo

Je�eli, dla przyk�adu, chcemy mie� obrazek os�oni�ty tekstem, rezultat wygl�da� by tak:

Blok p�ywaj�cy na lewo oraz op�ywaj�cy go obrazek i tekst
Jak to jest zrobione?

Kod HTML dla powy�szego przyk�adu:

causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...

Aby obrazek ustawiony zosta� na lewej stronie a tekst otacza� go z prawej, musisz jedynie zdefiniowa� szeroko�� elementu zawieraj�cego w sobie obrazek oraz ustawi� w�a�ciwo�� float na warto�� left:

#picture {
float:left;
width: 100px;
}

* Poka� przyk�ad

Kolejny przyk�ad: kolumny

P�ywanie mo�e by� tak�e u�ytwane do tworzenia kolumn w dokumencie. Aby stworzy� kolumn�, po prostu strukturyzujesz odpowiednie kolumny w kodzie HTML za pomoc� znacznika

jak ni�ej:

Haec disserens qua de re agatur
et in quo causa consistat non videt...

causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...

nam nihil esset in nostra
potestate si res ita se haberet...

Teraz porz�dan� szeroko�� kolumny ustawiamy na np. 33%, a potem ustawiamy p�ywanie ka�dej kolumny na lewo poprzez w�a�ciwo�� float:

#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
float:left;
width: 33%;
}

* Poka� przyk�ad

float mo�e otrzyma� warto�ci: left, right lub none.
W�a�ciwo�� clear

W�a�ciwo�ci clear u�ywamy do kontroli zachowania kolejnego elementu w dokumencie za elementem p�ywaj�cym.

Standardowo, kolejne elementy przesuwaj� si� w taki spos�b, aby zape�ni� puste miejsce stworzone przez element p�ywaj�cy po stronach. Popatrz na przyk�ad powy�ej gdzie tekst automatycznie przesuwa si� na bok zdj�cia Billa Gatesa.

W�a�ciwo�� clear mo�e przyjmowa� warto�ci left, right, both or none. Zasada jest nast�puj�ca, Je�eli clear, dla przyk�adu, ma warto�� both dla elementu,g�rny margines obramowania elementu b�dzie zawsze poni�ej dolnego marginesu obramowania elementu nad nim p�ywaj�cego.

Bill Gates

causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...

Aby wy��czy� p�ywanie tekstu w stron� obrazka, mo�emy wykorzysta� nast�puj�cy kod CSS:

#picture {
float:left;
width: 100px;
}

.floatstop {
clear:both;
}

* Poka� przyk�ad

Podsumowanie

P�ywanie jest bardzo u�yteczne w wielu sytuacjach i cz�sto wykorzystuje si� je wraz z pozycjonowaniem. W nast�pnej lekcji popatrzymy bli�ej na pozycjonowanie blok�w w spos�b relatywny lub absolutny.

Czwartek 3 Grudzień

Lekcja 12: Wysoko�� i szeroko��

Do teraz, nie interesowali�my si� zbytnio rozmiarami element�w z kt�rymi pracowali�my. W tej lekcji, popatrzymy na to jak definiowa� wysoko�� oraz szeroko�� element�w.

* szeroko��
* wysoko��

Ustawianie szeroko�ci [width]

Dzi�ki w�a�ciwo�ci width, mo�esz zdefiniowa� szeroko�� elementu.

Ten prosty przyk�ad przedstawia blok w kt�rym zosta� umieszczony tekst:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

* Poka� przyk�ad

Ustawianie wysoko�ci [height]

Zauwa� jak w przyk�adzie powy�ej wysoko�� bloku uzale�niona jest od wysoko�ci zawarto�ci. Mo�esz wp�yn�� na wysoko�� elementu dzi�ki w�a�ciwo�ci height. Jako przyk�ad spr�bujmy ustawi� wysoko�� bloku na 500px:

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

* Poka� przyk�ad

Podsumowanie

Lekcja 9, 10, 11 oraz 12 wprowadzi�a si� w model blokowy CSS. Mo�esz teraz zobaczy�, jak wiele mo�liwo�ci daje model blokowy. Mo�liwe �e do teraz u�ywa�e� tabel HTML do tworzenia uk�adu graficznego na stronie, ale dzi�ki CSS i modelowi blokowemu masz ju� mo�liwo�� osi�gni�cia eleganckiego i bardziej precyzyjnego uk�adu graficznego zgodnego ze standardem W3C.

Lekcja 11: Obramowania

Czwartek 3 Grudzień

Lekcja 11: Obramowania

Obramowania mo�a u�ywa� w wielu przypadkach, na przyk�ad dekoruj�c element lub podkre�laj�c oddzielenie dw�ch rzeczy. CSS daje ci niesko�czon� mo�liwo�� wykorzystania obramowa� na twojej stronie.

* border-width
* border-color
* border-style
* Przyk�ady definicji obramowa�
* border

Szeroko�� obramowa� [border-width]

Szeroko�� obramowa� definiujemy u�ywaj�c w�a�ciwo�ci border-width, kt�ra mo�e otrzyma� warto�ci thin, medium oraz thick, lub warto�� numeryczn�, okre�lon� w pikselach. Poni�szy rysunek przedstawia system:

Przyk�ady szeroko�ci obramowa�
Kolor obramowa� [border-color]

Kolory

W�a�ciwo�� border-color definiuje jakiego koloru ma by� obramowanie. Warto�ci dopuszczalne we w�a�ciwo�ci to np: "#123456", "rgb(123,123,123)" lub "yellow" .
Typy obramowa� [border-style]

Istnieje wiele typ�w obramowa� do wyboru. Poni�ej przedstawiam 8 r�nych typ�w obramowa� i ich interpretacje w Internet Explorer 5.5. Wszystkie przyk�ady wykorzystuj� kolor z�oty "gold"oraz grubo�� "thick" ale oczywi�cie mo�na korzysta� z innego koloru lub grubo�ci obramowania.

Je�eli nie chcesz wy�wietli� �adnego obramowania u�yj none lub hidden.

R�ne typy obramowa�
Przyk�ady definicji obramowa�

Te trzy wy�ej opisane w�a�ciwo�ci mo�na po��czy� przez jeden element i produkowa� najr�niejsze obramowania. Aby zilustrowa� to przyk�adem, popatrzmy na dokument gdzie zdefiniowane s� r�ne obramowania dla element�w

,

,
and
. Rezultat mo�e nie by� zaskakuj�cy ale przedstawia jak wiele mo�liwo�ci jest do wykorzystania:

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}

* Poka� przyk�ad

Mo�liwe jest ustawienie konkretnych w�a�ciwo�ci oddzielnie dla g�rnej, dolnej, prawej oraz lewej strony obramowania. Kolejny przyk�ad pokazuje jak skorzysta� z tej mo�liwo�ci:

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}

* Poka� przyk�ad

Kompilacje [border]

Tak jak wiele innych w�a�ciwo�ci, tak�e ta mo�e z��czy� kilka cech zwi�zanych z obramowaniami w jedn� w�a�ciwo��. Popatrzmy na przyk�ad:

p {
border-width: 1px;
border-style: solid;
border-color: blue;
}

Mo�e by� skompilowany w :

p {
border: 1px solid blue;
}

Podsumowanie

W tej lekcji nauczy�e� si� o niesko�czonych mo�liwo�ciach jakie daje ci CSS w dziedzinie u�ywania obramowa� a stronie.

Nast�pna lekcja wprowadzi ci� w definiowanie rozmiar�w w modelu blokowym - wysoko�ci i szeroko�ci.

Czwartek 3 Grudzień

Lekcja 10: Margines wewn�trzny i zewn�trzny

W poprzedniej lekcji zosta�e� wprowadzony w model blokowy. W tej lekcji, popatrzymy jak mo�esz zmieni� prezentacj� element�w poprzez ustawienie w�a�ciwo�ci margin i padding.

* Ustaw margines zewn�trzny w elemencie
* Ustaw margines wewn�trzny w elemencie

Ustaw margines zewn�trzny w elemencie

Element ma cztery strony: praw�, lew�, doln� i g�rn�. margin okre�la odleg�o�� ka�dej ze stron do s�siedniego elementu (lub obramowania dokumentu). Patrz tak�e na diagram w lekcji 9 dla ilustracji.

Jako pierwszy przyk�ad, popatrzymy jak definiuje si� margines zewn�trzny dla dokumentu tzn. dla elementu . Poni�sza ilustracja przedstawia margines zewn�trzny na stronie jaki sobie wybrali�my.

Przyk�ady margines�w

Kod CSS dla przyk�adu b�dzie wygl�da� nast�puj�co:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

Mo�esz tak�e wybra� bardziej eleganck� kompilacj�:

body {
margin: 100px 40px 10px 70px;
}

* Poka� przyk�ad

Mo�esz ustawi� marginesy zewn�trzne w ten sam spos�b dla prawie ka�dego elementu. Na przyk�ad, mo�esz zdefiniowa� marginesy zewn�trzne dla wszystkich akapit�w zaznaczonych elementem

:

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}

* Poka� przyk�ad

Ustaw margines wewn�trzny w elemencie

Margines wewn�trzny mo�na tak�e zrozumie� jako "wype�nianie". To ma sens gdy� margines wewn�trzny nie dotyczy odleg�o�ci mi�dzy elementami a jedynie definiuje wewn�trzn� odleg�o�� mi�dzy obramowaniem a zawarto�ci� elementu.

U�yteczno�� marginesu wewn�trznego mo�na zilustrowa� patrz�c na prosty przyk�ad, w kt�rym wszystkie nag��wki posiadaj� kolor t�a:

h1 {
background: yellow;
}

h2 {
background: orange;
}

* Poka� przyk�ad

Poprzez zdefiniowanie marginesu wewn�trznego dla wszystkich nag��wk�w, zmieniasz wielko�� wype�niania wok� tekstu dla ka�dego nag��wka:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

* Poka� przyk�ad

Podsumowanie

Jeste� teraz na drodze do opanowania modelu blokowego w CSS. W nast�pnej lekcji, popatrzymy bli�ej na mo�liwo�ci ustawiania obramowa� w r�nych kolorach i kszta�tach dla element�w.

Lekcja 9: Model blokowy

Czwartek 3 Grudzień

Lekcja 9: Model blokowy

Model blokowy w CSS opisuje bloki, kt�re s� generowane dla element�w HTML. Model blokowy zawiera tak�e dok�adne opcje zwi�zane z ustawieniem maginesu zewn�trznego, wewn�trznego, obramowania i zawarto�ci� ka�dego elementu. Poni�szy diagram pokazuje jak model blokowy jest skonstruowany:
Model blokowy w CSS

Powy�sza ilustracja mo�e wydawa� si� bardzo teoretyczna, wi�c spr�bujmy u�y� modelu blokowego w konkretnym przypadku z nag��wkami i tekstem. HTML dla naszego przyk�adu (uniwersalna deklaracja praw cz�owieka):

Artyku� 1:

Wszystkie istoty ludzkie rodz� si� wolne
i r�wne w godno�ci i prawach.

Poprzez dodanie koloru i informacji i czcionce przyk�ad b�dzie wygl�da� nast�puj�co:

Przyk�ad zawiera dwa elementy :

i
. Model blokowy dla dw�ch element�w mo�e by� zilustrowany nast�puj�co:

Nawet je�eli wygl�da to troch� skomplikowanie, ilustracja pokazuje jak ka�dy element HTML jest otoczony przez bloki. Bloki kt�re mo�emy ustawi� poprzez CSS.
<% '

W�a�ciwo�ci reguluj�ce bloki to: padding, margin i border. Nast�pne dwie lekcje b�d� dotyczy� w�a�nie tych trzech w�a�ciwo�ci:
'

* ' Lekcja 10: Model blokowy - margin & padding
* ' Lekcja 11: Model blokowy - border
'

'

Kiedy uko�czysz te dwie lekcje, zapanujesz nad modelem blokowym i b�dziesz potrafi� �atwiej i zgrabniej tworzy� uk�ad graficzny dla swoich dokument�w ni� robi�e� to wcze�niej w starym stylu za pomoc� tabel.
%>
Podsumowanie

W tej lekcji zosta�e� wprowadzony w model blokowy. W kolejnych trzech lekcjach popatrzymy bli�ej na to jak tworzy� i kontrolowa� elementy w modelu blokowym.

Czwartek 3 Grudzień

Lekcja 8: Grupowanie element�w (span i div)

Elementy i

s� u�ywane do grupowania i strukturyzowania dokumentu. B�dziesz je cz�sto wykorzystywa� wraz z atrybutami class oraz id.

W tej lekcji, popatrzymy bli�ej na u�ycie oraz

gdy� w�a�nie te dwa elementy HTML s� �ci�le zwi�zane z CSS.

* Grupowanie za pomoc�
* Grupowanie za pomoc�

Grupowanie za pomoc�

Element mo�esz nazwa� elementem naturalnym gdy� sam w sobie nie dodaje nic do dokumentu. Ale razem z CSS, mo�e doda� wiele interesuj�cych cech wizualnych do okre�lonej cz�ci tekstu w dokumencie.

Przyk�adem dla nas niech b�dzie tekst Benjamina Franklina:

Early to bed and early to rise
makes a man healthy, wealthy and wise.

Powiedzmy �e chcemy aby cz�� tekstu Pana Franklina zosta�a pokolorowana wyr�niona na czerwono. Do tego celu, zaznaczamy dany tekst znacznikiem . Ka�dy span zawiera w sobie ustawiony atrybut class, kt�ry potem wykorzystujemy w naszym arkuszu styl�w:

Early to bed and early to rise
makes a man healthy,
wealthy
and wise.

CSS nale��cy do dokumentu:

span.benefit {
color:red;
}

* Poka� przyk�ad

Oczywi�cie mo�emy tak�e wykorzysta� atrybut id aby doda� styl do elementu . W tym przypadku pami�taj tylko �e nie wolno umieszcza� dwuch takich samych warto�ci dla atrybutu id.
Grupowanie za pomoc�

Podczas gdy element u�ywamy w obr�bie element�w blokowych jak wida� by�o w poprzednim przyk�adzie,

u�ywamy do grupowania jednego lub wi�kszej ilo�ci element�w blokowych.

Opr�cz tej r�nicy, grupowanie za pomoc� elementu

dzia�a mniej wi�cej w ten sam spos�b. Popatrzmy na przyk�ad z dwiema listawi prezydent�w Stan�w Zjednoczonych podzielonych dwia ugrupowania polityczne:

Franklin D. Roosevelt

Harry S. Truman

John F. Kennedy

Lyndon B. Johnson

Jimmy Carter

Bill Clinton

Dwight D. Eisenhower

Richard Nixon

Gerald Ford

Ronald Reagan

George Bush

George W. Bush

Natomiast w arkuszu styl�w, okre�lamy grupy w ten sam spos�b jak wy�ej:

#democrats {
background:blue;
}

#republicans {
background:red;
}

* Poka� przyk�ad

W przyk�adach powy�ej, u�yli�my tylko element�w

oraz wykorzystuj�c tylko w�a�ciwo�ci koloru tekstu i t�a. Oba elementy maj� o wiele wi�kszy potencja�. Jednak nie przedstawimy tego w tej lekcji. Popatrzymy na to p�niej w naszym kursie.
Podsumowanie

W lekcji 7 oraz lekcji 8, nauczy�e� si� o selektorach id oraz class i o elementach span oraz div.

Powiniene� teraz potrafi� grupowa� i identyfikowa� wszystkie cz�ci swojego dokumentu, co jest wielkim krokiem w kierunku opanowania CSS. W lekcji 9 wprowadzimy ci� w model blokowy.

Czwartek 3 Grudzień

Lekcja 7: Identyfikacja i grupowanie element�w (class i id)

Czasami chcemy zastosowa� ten sam okre�lony styl do pewnego elementu lub grupy element�w. W tej lekcji, poka�emy bli�ej jak mo�na korzysta� z atrybut�w class oraz id do okre�lenia w�a�ciwo�ci stylu pewnych element�w.

Jak mo�esz pokolorowa� dany nag��wek inaczej ni� wszystkie inne nag��wki na stronie? Jak mo�esz pogrupowa� swoje odno�niki w r�ne kategorie i da� ka�dej z kategorii inny styl? Oto przyk�ady odpowiadaj�ce na proste pytania zadane w tej lekcji.
Grupowanie element�w poprzez klas�

Powiedzmy �e mamy dwie listy odno�nik�w do r�nych stron zwi�zanych z czerwonym i bia�ym winem. Kod HTML mo�e wygl�da� nast�puj�co:

Grona bia�ego wina:

Riesling

Chardonnay

Pinot Blanc

Grona czerwonego wina:

Cabernet Sauvignon

Merlot

Pinot Noir

* Poka� przyk�ad

Teraz chcemy �eby odno�niki z kategorii bia�ego wina by�y ��te, z czerwonego natomiast �eby by�y czerwone a reszta istniej�cych odno�nik�w �eby by�a niebieska.

Aby to osi�gn��, dzielimy odno�niki w dwie kategorie. Robimy tak poprzez nadanie klasy u�ywaj�c atrybutu class.

Spr�bujmy okre�li� pewne klasy u�ywaj�c kodu z powy�szego przyk�adu:

Grona bia�ego wina:

Riesling

Chardonnay

Pinot Blanc

Grona czerwonego wina:

Cabernet Sauvignon

Merlot

Pinot Noir

Mo�emy teraz zdefiniowa� specjalne w�a�ciwo�ci dla odno�nik�w nale��cych odpowiednio do bia�ego oraz czerwonego wina.

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}

* Poka� przyk�ad

Jak pokazali�my w przyk�adzie, mo�esz zdefiniowa� w�a�ciwo�ci dla element�w kt�re nale�� do konkretnej klasy poprzez u�ycie .nazwaklasy w arkuszu styl�w.
Identyfikacja elementu poprzez id

Dodatkowo aby pogrupowa� elementy, mo�esz potrzebowa� umie� identyfikowa� jeden unikalny element. Robi si� to poprzez u�ycie atrybutu id.

Co jest specjalnego w atrybucie id, to �e nie mog� istnie� dwa elementy w danym dokumencie HTML o tej samej warto�ci atrybutu id. Ka�de id musi by� unikalne. Innymi s�owy, powiniene� u�ywa� atrybutu class je�eli chcesz grupowa� par� lement�w. Teraz, popatrzmy bli�ej na przyk�ad mo�liwo�ci u�ycia atrubutu id:

Sekcja 1

...

Sekcja 1.1

...

Sekcja 1.2

...

Sekcja 2

...

Sekcja 2.1

...

Sekcja 2.1.2

...

Powy�ej mog� by� nag��wki do sekcji akapit�w. Naturalnie mo�emy doda� id do ka�dej z sekcji:

Sekcja 1

...

Sekcja 1.1

...

Sekcja 1.2

...

Sekcja 2

...

Sekcja 2.1

...

Sekcja 2.1.2

...

Powiedzmy �e nag��wek dla sekcji 1.2 musi by� czerwony. Mo�esz tak zrobi� za pomoc� nast�puj�cego kodu CSS:

#c1-2 {
color: red;
}

* Poka� przyk�ad

Jak wida� w powy�szym przyk�adzie mo�esz zdefiniowa� w�a�ciwo�ci dla konkretnego elementu poprzez u�ycie selektora #id w arkuszu styl�w dokumentu.
Podsumowanie

W tej lekcji nauczyli�my si� dodatkowej mo�liwo�ci u�ycia selektor�w, class oraz id, mo�esz teraz okre�li� w�a�ciwo�ci dla konkretnych element�w.

W nast�pnej lekcji, popatrzymy bli�ej na dwa elementy HTML, kt�re cz�sto ��czymy z w�a�ciwo�ciami CSS: oraz

Czwartek 3 Grudzień

Lekcja 6: Odno�niki

Mo�esz stosowa� to czego nauczy�e� si� w poprzednich lekcjach dla odno�nik�w (tzn. zmienia� kolory, czcionki, podkre�lenia, itd). Nowo�ci� jest to �e CSS pozwala definiowa� w�a�ciwo�ci zale�ne od stanu odno�nika,czyli tego czy odno�nik jest aktywny, odwiedzony, nie odwiedzony lub kursor jest nad odno�nikiem. To daje mo�liwo�� dodania u�ytecznych efekt�w na twojej stronie internetowej. Aby kontrolowa� te efekty wykorzystuje si� tak zwane pseudo-klasy.
Co to jest pseudo-klasa?

Pseudo-klasa pozwala ci zaingerowa� w spraw� warunk�w lub zda�e� gdy definiujesz w�a�ciwo�ci CSS dla znacznik�w HTML.

Popatrzmy na przyk�ad . Jak ju� wiesz, odno�niki okre�lamy znacznikiem . Mo�emy wi�c u�y� a jako selektor w CSS:

a {
color: blue;
}

Odno�nik mo�e mie� r�ne stany. Na przyk�ad, mo�e by� odwiedzony lub nie odwiedzony. Mo�esz u�y� pseudo-klas do skojarzenia r�nych styl�w zale�nie od stan�w.

a:link {
color: blue;
}

a:visited {
color: red;
}

U�yj a:link oraz a:visited odpowiednio dla odno�nik�w nie odwiedzonych oraz odwiedzonych. Odno�niki aktywne maj� pseudo-klas� a:active oraz a:hover je�eli kursor jest nad odno�nikiem.

Przebrniemy przez ka�d� z czterech pseudo-klas z przyk�adami i dok�adnym wyja�nieniem.
Pseudo-klasa: link

Pseudo-klasa :link jest u�ywana dla odno�nik�w prowadz�cych do stron nie odwiedzonych przez u�ytkownika.

W przyk�adzie poni�ej, nie odwiedzony odno�nik b�dzie jasno niebieski.

a:link {
color: #6699CC;
}

* Poka� przyk�ad

Pseudo-klasa: visited

Pseudo-klasa :visited jest u�ywana dla odno�nik�w prowadz�cych do stron odwiedzonych ju� przez u�ytkownika. Na przyk�ad, kod poni�ej uczyni wszystkie odwiedzone odno�niki ciemno purpurowe:

a:visited {
color: #660099;
}

* Poka� przyk�ad

Pseudo-klasa: active

Pseudo-klasa :active jest u�ywana dla odno�nik�w aktywnych.

Przyk�ad zamieni kolor t�a aktywnych odno�nik�w na ��ty:

a:active {
background-color: #FFFF00;
}

* Poka� przyk�ad

Pseudo-klasa: hover

Pseudo-klasa :hover jest u�ywana kiedy kursor myszy najedzie na odno�nik.

Mo�na to wykorzysta� do tworzenia interesuj�cych efekt�w. Na przyk�ad, je�eli chcemy aby nasze odno�niki by�y pomara�czowe i pochylone kiedy kursor najedzie na odno�nik, kod CSS powinien wygl�da� nast�puj�co:

a:hover {
color: orange;
font-style: italic;
}

* Poka� przyk�ad

Przyk�ad 1: Efekt kiedy kursor jest nad odno�nikiem

Bardzo popularne jest tworzenie r�nych efek�w kiedy kursor jest nad odno�nikiem. Popatrzmy wi�c na kilka dodatkowych przyk�ad�w zwi�zanych z pseudo-klas� :hover.
Przyk�ad 1a: Odst�p mi�dzy literami

Jak pewnie pami�tasz z lekcji 5, odst�p mi�dzy literami mo�na regulowa� poprzez w�a�ciwo�� letter-spacing. Mo�na zastosowa� t� w�a�ciwo�� do odno�nika jako specjalny efekt:

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

* Poka� przyk�ad

Przyk�ad 1b: UPPERCASE and lowercase

W lekcji 5 patrzyli�my na w�a�ciwo�� text-transform, kt�ra zmienia�a wielko�� liter. To tak�e mo�e zosta� u�yte jako efekt w odno�niku:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

* Poka� przyk�ad

Te dwa przyk�ady ilustruj� ide� praktycznie niesko�czonych mo�liwo�ci kombinacji r�nych w�a�ciwo�ci. Mo�esz stworzy� sw�j w�asny efekt - spr�buj sam!
Przyk�ad 2: Usu� podkre�lenie odno�nika

Cz�sto zadawanym pytaniem jest jak usun�� podkre�lenie odno�nika ?

Powiniene� rozpatrzy� uwa�nie czy jest potrzebne usuni�cie podkre�lenia, co mo�e znacz�co zmniejszy� u�yteczno�� twojej strony. Ludzie s� przyzwyczajeni do niebieskiego podkre�lenia odno�nik�w na stronach internetowych i wiedz� �e mog� na nie klikn��. Nawet moja mama wie o tym! Je�eli zmienisz podkre�lenie i kolor odno�nika istnieje du�a szansa �e u�ytkownik zmiesza si� i nie zdob�dzie pe�nych korzy�ci z tre�ci umieszczonej na twojej stronie.

To smutne, bardzo �atwo jest usun�� podkre�lenie z odno�nika. Jak ju� wiesz z lekcji 5, w�a�ciwo�� text-decoration mo�e zosta� u�yta do okre�lenia czy tekst ma by� podkre�lony czy te� nie. Aby usun�� podkre�lenie, po prostu ustaw warto�� w�a�ciwo�ci text-decoration na none.

a {
text-decoration:none;
}

Alternatywnie, mo�esz ustawi� text-decoration wraz z innymi w�a�ciwo�ciami dla wszystkich czterech pseudo-klas.

a:link {
color: blue;
text-decoration:none;
}

a:visited {
color: purple;
text-decoration:none;
}

a:active {
background-color: yellow;
text-decoration:none;
}

a:hover {
color:red;
text-decoration:none;
}

* Poka� przyk�ad

Podsumowanie

W tej lekcji nauczy�e� si� o pseudo-klasach oraz u�ywania w ich obrembie paru w�a�ciwo�ci z poprzednich lekcji. To powinno pokaza� ci ie� mo�liwo�ci jakie dostarcza CSS.

W nast�pnej lekcji nauczymy ci� jak definiowa� w�a�ciwo�ci dla konkretnego elementu oraz grupy element�w.