Archiwum kategorii ‘Sekrety Webmasterów’

Pierwszy krok

środa, 28 Kwiecień 2010

Przez wiele lat wykonywania stron internetowych na zlecenia oraz w fir­mach gdzie szukałem etatu, na pierwszym spotkaniu zawsze padało pytanie: To co pan już zrobił? Nie ma co się dziwić, że to pytanie pada, jak bowiem ma po­tencjalny zleceniodawca czy pracodawca zweryfikować umiejętności człowieka, którego widzi zazwyczaj po raz pierwszy w życiu? Jeżeli orientuje się choć tro­chę w temacie, to może zapytać o jakiś szczegół, technologie, trend itp., ale za­zwyczaj się nie zna. Wie jakie strony znajdują się w Internecie, wie jakie rozwiązania na swoich witrynach ma konkurencja i to wszystko.

Nawet w firmach internetowych szefowie nie zawsze mają pełną i aktual­ną wiedzę na temat tworzenia stron. W tym przypadku zazwyczaj w rozmowach rekrutacyjnych uczestniczy doświadczony programista z danej firmy, który mo­że nas dokładnie przepytać i szczegółowo poznać nasze umiejętności. Jednak w przypadku zleceń nasi rozmówcy, będą wiedzieli na ten temat bardzo mało, albo wcale, więc jedynym rozsądnym pytaniem, które będą mogli zadać jest: To co pan już zrobił? To co pani już zrobiła?

Na początek warto więc zrobić kilka stron za darmo: dla siebie, rodziny, znajomych, a nawet fikcyjnych firm. Czasem niektóre fundacje szukają wyko­nawców stron za małe pieniądze, albo i zupełnie za darmo. Okazji, by zrobić strony do swego portfolio jest więc mnóstwo. Wystarczy się rozejrzeć.

Ile więc tych stron powinienem mieć w swoim portfolio? Im więcej tym lepiej. Jednak mając wykonanych już kilkanaście, czy kilkadziesiąt witryn, war­to wybrać z nich te najlepsze, ale nie mniej niż połowę z nadających się w ogóle do pokazania.

Dolna granica też nie istnieje. Nawet jeżeli mamy jedną stronę i widzimy, że ktoś chce zlecić wykonanie witryny, to nie czekajmy, aż przygotujemy jesz­cze 5 kolejnych, tylko zgłaszajmy się. W skrajnych przypadkach może udać się nawet bez portfolio.

Teraz pewnie chciałbyś wiedzieć: jak budować portfolio, co musi się w nim znaleźć i co wywiera najlepsze wrażenie i przynosi największe efekty? Odpowiedzi na te pytania zawarłem w e-booku „Jak zarabiać na robieniu stron WWW”, który jest bonusem do szkolenia „Zawodowy Webmaster” w wersji stacjonarnej i e-learningowej.



Jak wykorzystać selektory cz. 2

wtorek, 20 Kwiecień 2010

W poprzednim artykule przedstawiłem selektor uniwersalny, selektor typu, selektory potomka, dziecka i braci. W tym artykule będę kontynuował opis używania kolejnych selektorów.

Definicję styli będziemy nadal umieszczać w pliku „style.css”. Kod strony „index.html” zmienił się w niewielkim stopniu i powinien wyglądać tak:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong class="wielkie">Etiam ullamcorper. <a id="pierwszy" href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span class="wielkie">non felis. <a rel="nofollow" href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#" rel="follow">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p class="wielkie">Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Często bywa tek, że część właściwości ma być identyczna dla różnych elementów strony. Np. i akapity i elementy div mają mieć identyczne obramowanie, a kolor tła dla każdego z tych elementów ma być inny. Do ustalenia obramowania użyjemy selektora grupowania – selektory poszczególnych elementów umieszczamy oddzielone przecinkiem jeden za drugim przed definicją stylu. Pozostałe właściwości określimy w zwykłych selektorach typów.

div, p {border: 2px solid #ff0000;}
div {background-color: #ff9966;}
p {background-color: #99ff66;}

Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Grupować można selektory wszystkich rodzajów. Następny rodzaj selektora to selektor atrybutu. Oto jego przykład:

a[rel] {color: #66ff66;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) posiadające atrybut „rel” bez względu na jego wartość. Jeżeli chcemy wyróżnić elementy o określonej wartości atrybutu, użyjemy selektora atrybutu o określonej wartości

a[rel="nofollow"] {color: #cc33ff;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko ten odnośnik, którego atrybut „rel” miał wartość „nofollow”.

Selektor klasy pozwala na wybranie wszystkich elementów określonej klasy, albo tylko elementów określonego typu tej klasy. Selektor klasy jest zapisywany z kropką przed nazwą klasy, może być dodany do innego selektora (bez spacji przed kropką), ogranicza wówczas zakres tego selektora do elementów tej klasy:

.wielkie {font-size: large;}
span.wielkie {font-weight: bold;}

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Wszystkie elementy klasy „wielkie” zostały powiększone. Dodatkowo, dzięki drugiej definicji stylu, zawartość elementu „span” została też pogrubiona. Pogrubienie elementu „strong” wynika z samej jego definicji i jest realizowane przez przeglądarkę, a nie style.

Selektor identyfikatora

#pierwszy {border: 4px double #ff0000;}

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Element o identyfikatorze „pierwszy” został otoczony podwójną ramką. Na jednej stronie wczytanej do przeglądarki może znajdować się tylko jeden element o określonym identyfikatorze.

Ciąg dalszy może pojawić się szybciej, jeżeli poniżej pojawi się kilka komentarzy od was.



Jak wykorzystać selektory cz. 1.

poniedziałek, 12 Kwiecień 2010

W poprzednim artykule przedstawiłem selektory w stylach CSS. Tym razem pokażę jak ich używać i jakie to może przynieść efekty. Za pomocą selektorów wybieramy element na stronie, który chcemy sformatować. Następnie określamy jakie ich właściwości chcemy zdefiniować i podajemy ich wartość. Załóżmy, że chcemy sformatować akapit na stronie zmienimy kolor czcionki i dodamy obramowanie. Selektorem w tym przypadku będzie „p” – akapit. Jest to selektor typu, gdyż wskazuje jedynie typ elementu strony – w tym przypadku selektor wybierze wszystkie akapity na stronie. Właściwościami będą: „color” – kolor znaków i „border” – obramowanie, a wartościami tych właściwości będą w pierwszym przypadku „#00ff00;” – kolor zielony, a w drugim „4px double #ff0000;” – obramowanie grubości 4 pikseli, linią podwójną w kolorze czerwonym.

Cały zapis można zapisać w pliku „style.css” w taki sposób:

p{color: #00ff00; border: 4px double #ff0000;}

lub taki:

p
{
    color: #00ff00;
    border: 4px double #ff0000;
}

Możemy sprawdzić to w kodzie strony „index.html”

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong>Etiam ullamcorper. <a href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span>non felis. <a href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Efekt powinien prezentować się następująco:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Kolejnym selektorem jest „*” czyli selektor uniwersalny, wskazujący wszystkie elementy na stronie. Najczęściej używa się go do wyzerowania marginesów i dopełnień elementów domyślnie ustawianych przez przeglądarki. Każda może ustawiać nieco inne wartości tych właściwości.

* {margin: 0; padding: 0;}

Jest to przydatny zapis w przypadku witryn, gdzie różnica 1 piksela mogła by popsuć wygląd całej strony. Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Następny rodzaj selektora to selektor potomka. Oto jego przykład:

p a {font-size: large;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) leżące wewnątrz akapitu (elementu „p”)

Podobny do poprzedniego jest selektor dziecka. Może on przybrać postać taką:

p>a {color: #ffcc33;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko te odnośniki które leżały bezpośrednio wewnątrz akapitu. Pierwsze dwa odnośniki znajdują się dodatkowo w znacznikach „strong” i „span”, więc selektor p>a nie wskazuje ich.

Selektor braci:

span+a {text-decoration: none;}

Do usunięcia podkreślenia wybrane zostaną tylko te odnośniki, które stoją bezpośrednio za znacznikiem „span”.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Uwaga, selektory braci i selektory dziecka nie są interpretowane przez przeglądarkę IE 6.

Ciąg dalszy niebawem. A w zasadzie zależy to od ilości komentarzy pod spodem.



Selektory CSS

sobota, 3 Kwiecień 2010

Większość osób używających CSS posługuje się kilkoma podstawowymi selektorami, a przecież ich ilość jest znacznie większa. Wraz z ilością używanych selektorów rosną możliwości formatowania różnych elementów na stronie.

Zachęcam do przetestowania poniższych selektorów i dzielenia się uwagami na dole strony.

selektor typu np. p
ustala określone cechy dla wszystkich elementów p
selektor uniwersalny *
pozwala ustalić określone cechy dla wszystkich elementów strony
selektor potomka np. td li
ustala określone cechy dla elementów li leżących wewnątrz elementów td niekoniecznie bezpośrednio.
selektor dziecka np. div > p
ustala określone cechy dla elementów p leżących bezpośrednio wewnątrz elementów div.
selektor braci np. span + a
ustala określone cechy elementów a leżących bezpośrednio za elementami span.
grupowanie selektorów np. h2, h3
ustala określone cechy dla wymienionych elementów
prosty selektor atrybutu np.: h3[class]
ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class. Można podać kilka atrybutów, wtedy cechy elementu będą ustalone jeżeli element ma ustalone wszystkie wymienione atrybuty np.: h3[class][title]
selektor atrybutu o określonej wartości np.: h3[class=”header”]
ustala określone cechy dla elementów h3 jeżeli mają ustaloną wartość atrybutu class na header. Analogicznie jak w poprzednim wypadku można podać kilka atrybutów z wartościami lub bez.
selektor klasy np.: .header
ustala określone cechy dla elementów jeżeli mają atrybut class ustawiony na header.
selektor identyfikatora np.: #jeden
ustala określone cechy dla elementu o wartości atrybutu id ustawionym na jeden. Identyfikator musi jednoznacznie określać tylko jeden element w dokumencie.
pierwsza linia np.: p:first-line
ustala określone cechy dla pierwszej linii elementów p
pierwsza litera np.: p:first-letter
ustala określone cechy pierwszej literze elementów p jeżeli ich zawartość rozpoczyna tekst.
selektor przed np.: p:before
wstawia podaną zawartość przed elementami p.
selektor po np.: p:after
wstawia podaną zawartość po elementach p.
selektor podstawowy np.: a:link
ustala określone cechy dla nie klikanych elementów a.
selektor odwiedzony np.: a:visited
ustala określone cechy dla klikniętych elementów a.
selektor wskazany np.: a:hover
ustala określone cechy dla elementów a wskazanych myszą.
selektor aktywny np.: a:active
ustala określone cechy dla klikanych elementów a.
selektor zogniskowania np.: a:focus
ustala określone cechy dla elementu a wybranego klawiszem tabulacji (oprócz odnośników stosuje się do pól formularzy, w których umieszczono kursor).
selektor pierwszego dziecka np.: div:first-child
ustala określone cechy dla pierwszego elementu div

Selektory można ze sobą łączyć. Należy przy tym uważać na spacje. Selektor „p .opis” wskazuje inne elementy niż „p.opis”. Pierwszy wskazuje na elementy klasy opis zawarte w znacznikach p, a drugi wskazuje na znaczniki p z ustawioną klasą opis.

Uwaga!!! Nową stronę należy przetestować w różnych przeglądarkach. Zwłaszcza w IE 6 nie wszystkie selektory działają. Na szczęście ta przeglądarka mocno traci na popularności i w zasadzie można ją już pominąć.



Jak zrobić stronę squeeze page i galerię internetową – darmowe fragmenty.

wtorek, 9 Marzec 2010

Jestem niesamowicie podekscytowany ofertą, którą dla Ciebie przygotowuję. TAKIEGO szkolenia jeszcze nie prowadziłem, ale nie o tym chciałem… By umilić Ci oczekiwanie na premierę „Zawodowego Webmastera” w nowej formie i w niewiarygodnie niskiej cenie przygotowałem dwa fragmenty z szkolenia wideo. Jutro możesz otrzymać kolejne dwa fragmenty. Wystarczy, że na dole strony, w okienku komentarza napiszesz, co jest Twoim największym problemem w robieniu stron internetowych, lub zarabianiu na robieniu stron? Jeżeli odpowiesz na to pytanie, jutro na wpisany w formularzu adres dostaniesz wiadomość z linkiem do kolejnych części nagrania i hasłem dostępu.

Powiększ nagranie na cały ekran przy pomocy przycisku umieszczonego na dole po lewej stronie odtwarzaczaZmień rozmiar

Jeżeli przycisk powiększania nie działa, skorzystaj z linku do powiększonej wersji tego filmu

Jeżeli przycisk powiększania nie działa, skorzystaj z linku do powiększonej wersji tego filmu

  • Wiesz już, że programowanie stron www jest dla Ciebie?
  • Chcesz nauczyć się jeszcze więcej konkretnych umiejętności?
  • Zależy Ci na bezpośrednim kontakcie z doświadczonym trenerem it i programistą?
  • Chcesz wiedzieć jak zarabiać najwięcej na robieniu stron niezależnie od tego, czy jesteś pracownikiem w czyjejś firmie, czy wolnym strzelcem?

Jeśli odpowiedziałeś „TAK” przynajmniej raz, to szkolenie „Zawodowy Webmaster czyli jak tworzyć profesjonalne strony www” jest dla Ciebie.
Oczekuj w najbliższy czwartek specjalnej oferty na to szkolenie w nowej formie i w niewiarygodnie niskiej cenie.

Do zobaczenia
Leszek Sewastianowicz

P.S. Wyjątkowo atrakcyjna oferta będzie obowiązywała tylko przez 24 godziny od daty publikacji, więc bądź czujny, zapisz sobie datę 11.03.2010 w organizerze, kalendarzu, czy notatniku. Albo po prostu poproś najbliższą Ci osobę, by Ci przypomniała o tym w najbliższy czwartek.



Jak wstawić tekst na stronę?

środa, 24 Luty 2010

Zawartość strony może być dość zróżnicowana. Same teksty mogą zostać ujęte w akapity, nagłówki, listy itp. Generalnie można te elementy podzielić na blokowe i liniowe. Elementy na stronie są umieszczane przy pomocy znaczników tych elementów np. znacznikami elementu p czyli akapitu są <p> i </p>

Elementy blokowe

Elementy blokowe to takie, które bez względu na to, czy wstawimy je w nowej linii czy bezpośrednio za inną zawartością w tej samej linii, na stronie będą zawsze umieszczane w nowej linii. Również treści wpisane za elementami blokowymi będą przenoszone poniżej jego ostatniej linii. Elementami blokowymi są: nagłówki (h1, h2, h3, h4, h5, h6), cytat (blockquote), blok/sekcja (div), akapit (p), tekst preformatowany (pre), listy i elementy list (ul, ol, li dt, dd, dl).

Elementy liniowe

Elementy liniowe łączą się w jednej linii z elementami je poprzedzającymi i z elementami następującymi po nich. Do elementów liniowych należą: skrót (abbr), akronim (acronym), przejście do nowej linii (br), odniesienie do źródła cytatu (cite), kod (code), podkreślenie znaczenia fragmentu tekstu (em), cytat (q), wydzielenie fragmentu tekstu (span), wyróżnienie (strong). Wszystkie te elementy w mniejszym lub większym stopniu określają znaczenie treści, którą zawierają. Jest też kilka elementów liniowych odpowiedzialnych jedynie za prezentacje treści. Są to: pogrubienie tekstu (b), powiększenie tekstu (big), pochylenie tekstu (i), pomniejszenie tekstu (small), tekst w dolnym indeksie (sub), tekst w górnym indeksie (sup). Ze względu na to, że identyczny efekt można osiągnąć przy pomocy styli CSS, elementy te nie są zalecane.

Stronę zazwyczaj rozpoczyna tytuł. Do jego umieszczenia najlepiej użyć nagłówka pierwszego stopnia (<h1></h1>). Jest to nagłówek domyślnie wyświetlany największą czcionką, ale sposób wyświetlania można zmienić stosując style css. Każdy kolejny stopień nagłówków, a jest ich 6 (od <h1></h1> do <h6></h6>), jest coraz mniejszy i mniej istotny. Nagłówki są elementami blokowymi. Treść nagłówka umieszczamy między jego znacznikami np. (<h1>Tytuł strony</h1>). Treścią nagłówków oprócz tekstu mogą być wszystkie elementy liniowe.

Elementy blokowe w większości nie mogą zawierać innych elementów blokowych. Wyjątkami są tu elementy div, które mogą zawierać zarówno elementy liniowe, jak i blokowe, w tym inne bloki div. Drugim wyjątkiem są elementy blockquote, które nie tyle mogą, co muszą zawierać bezpośrednio inny element blokowy. Również elementy ul i ol wewnątrz siebie bezpośrednio mogą zawierać jedynie elementy li.

Element pre służy do wstawiania treści preformatowanych, w których chcemy zachować oryginalny układ białych znaków (spacji, tabulatorów, przejść do nowej linii). Nie może zawierać elementów: img, object, big, small, sub, sup. W przypadku umieszczania na stronie kodów programów lepiej jest użyć elementu code.

Znacznik <br /> jest znacznikiem przejścia do nowej linii. Kilka takich znaczników umieszczonych jeden za drugim powoduje powstanie większych odstępów na stronie. Jest to znacznik bardzo przydatny podczas tworzenia stron, gdyż przeglądarka ignoruje standardowe przejście do nowej linii.

Znacznik <span></span> jest elementem liniowym i służy do formatowania przy pomocy kaskadowych arkuszy styli wydzielonych fragmentów tekstów.

Znacznik odnośnika <a href=”strona.html”>strona</a> jest istotą Internetu. Pozwala na powiązanie ze sobą odrębnych dokumentów. Zawartością odnośnika jest najczęściej ciąg znaków, który można kliknąć, by otworzyć nowy dokument na stronie, lub przenieść się na zupełnie inną stronę, ale może to być również grafika np.: <a href=”strona.html”><img src=”zdjecie.jpg” alt=”zdjęcie” /></a>. Atrybut href określa miejsce docelowe odnośnika. Jeżeli jest to dokument naszego serwisu wystarczy podać względną ścieżkę do odpowiedniego pliku np.: <a href=”strony/strona4.html”>Strona 4</a>. Natomiast gdy tworzymy odnośnik do innej strony, podajemy jej pełny adres np.: <a href=”http://www.strona.pl/strony/strona4.html”>xxx</a> Za pomocą odnośników można też przenieść się do etykiety – odpowiedniego miejsca na stronie (przeglądarka automatycznie przewinie stronę do żądanego miejsca). Tego typu odnośniki konstruuje się w następujący sposób: <a href=”#etykieta”<xxx>/a>. Po znaku „#” w atrybucie „href” umieszczamy nazwę etykiety. Ta sama nazwa musi się znajdować w miejscu docelowym w atrybucie „id” dowolnego znacznika np. <h3 id=”etykieta”>nagłówek xx</h3>. Etykieta może znajdować się również na innej stronie. Odnośnik do takiej etykiety może wyglądać następująco: <a href=”http://www.strona.pl/strony/strona4.html#etykieta”>xxx</a>. Po adresie strony wstawiamy znak „#”, a po nim nazwę etykiety. Element a nie może zawierać innych elementów a.



Podstawy stron WWW – XHTML

piątek, 19 Luty 2010

(X)HTML

Kod strony internetowej składa się ze znaczników języka html reprezentujących zdefiniowane elementy strony tj. odnośniki, akapity, tabele itp. Znacznik jest to ciąg znaków pomiędzy symbolami „<” i „>” np. <body>, <table>. Większość znaczników ma swoje wersje otwierające i zamykające, w których po symbolu „<” umieszcza się znak „/” np. <span> </span>. Znaczniki takie wpływają na wszystko co się pomiędzy nimi znajduje. Znaczniki nie mające swoich wersji zamykających zapisujemy w formie <br> na stronach w języku HTML lub <br /> w przypadku stosowania języka XHTML. Często znaczniki posiadają atrybuty modyfikujące ich wygląd lub funkcjonowanie np. <img src=”przykład.jpg” alt=”przykład” />. Nazwę atrybutu umieszcza się za nazwą znacznika, po spacji, następnie stawia się znak równości i w cudzysłowie ustawia się wartość atrybutu. Specyfikacja języka zaleca, by nie umieszczano przerw pomiędzy nazwą atrybutu, znakiem równości, znakami cudzysłowu i wartością atrybutu.

W kodzie strony możemy również umieścić komentarze. Wszystko, co zostanie umieszczone pomiędzy „<!-–” a „-–>”, nie będzie widoczne na stronie. Komentarze mogą posłużyć m.in. do umieszczania własnych uwag lub ukrycia fragmentów strony. Komentarzy nie można w sobie zagnieżdżać.

Struktura dokumentu składa się z trzech głównych elementów: znaczników <html></html>, w których zawiera się cały kod strony zapisany w HTMLU lub XHTMLU, znaczników <head></head> obejmujących część nagłówkową wpływającą na różne aspekty funkcjonowania strony w Internecie, ale nie wyświetlającą żadnych elementów na stronie, oraz znaczników <body></body> stanowiących główną część strony, wyświetlaną w przeglądarce. W znaczniku <body> nie można umieszczać tekstu w sposób bezpośredni. Tekst musi znajdować się w dodatkowych znacznikach.

html 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!--komentarz -->
<body>
</body>
</html>

xhtml 1.0

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<!--komentarz -->
<head>
<title>Tytuł</title>
</head>
<body>
</body>
</html>

xhtml 1.1

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Tytuł</title>
</head>
<body>
<!--komentarz -->
</body>
</html>


Zabezpieczony: Odbieranie danych z formularza

czwartek, 4 Luty 2010

Ten wpis jest zabezpieczony hasłem. Aby go zobaczyć, proszę wprowadzić poniżej swoje hasło:



Formularze na stronie www

poniedziałek, 4 Styczeń 2010

Formularz na stronie www jest bardzo użytecznym narzędziem zwiększającym interakcje z użytkownikiem. Formularze mogą służyć do wysyłania wiadomości, zbierania informacji o odwiedzających stronę, składania zamówień, przesyłania parametrów do skryptów itp.

<form action="form.php" method="post">
	<div>
		Miejsce na pola formularza
	</div>
</form>

Formularz jest wstawiany za pomocą znaczników „<form></form>”. Najczęściej podajemy w nich dwa parametry: action – adres skryptu przetwarzającego dane z formularza oraz method – metodę wysyłania danych. W powyższym przykładzie przetwarzaniem danych z formularza zajmie się skrypt umieszczony w pliku form.php, a dane wysłane zostaną metodą POST.

Istnieją dwie metody wysyłania formularzy: GET i POST. Przy użytej metodzie GET dane wysyłane do skryptu dołączane są do adresu URI (ang. Uniform Resource Identifier – Ujednolicony Identyfikator Zasobów) np. www.serwan.pl/form.php?zmienna=wartosc. W takim adresie bardzo łatwo można zmienić nie tylko wartość zmiennej, ale również jej nazwę. W niektórych przypadkach może to spowodować niechciane przez twórcę lub właściciela strony rezultaty. Dane GET pozostają w historii przeglądarki. Z tego względu nie należy przekazywać tą metodą danych poufnych np. numerów kart kredytowych. Przesyłanie danych metodą GET jest też ograniczone limitem długości URI, który w przeglądarce Internet Explorer wynosi 2048, a może być też obcinany na różnych urządzeniach pośredniczących.

Dużo bezpieczniejsze jest używanie metody POST. W tej metodzie dane przesyłane są w protokole HTTP, co ogranicza możliwość ich podejrzenia i zmodyfikowania. Nie ma też limitu wielkości dla tych danych.

Kontrolki formularzy nie powinny być umieszczane bezpośrednio pomiędzy znacznikami „<form></form>”. Powinno się to robić wewnątrz dodatkowych znaczników np. bloku div lub tabeli.

<form action="form.php" method="post">
	<div>
		Imię: 
		<input type="text" name="imie" />
		Hasło: 
		<input type="password" name="haslo" />
		Akceptuję regulamin: 
		<input type="checkbox" name="akcept" value="q" checked=checked/>
		Kobieta: 
		<input type="radio" name="plec" value="kobieta" />
		Mężczyzna: 
		<input type="radio" name="plec" value="mezczyzna" />
		Rok urodzenia: 
		<select name="rok">
			<option>1998</option>
			<option>1997</option>
			(...)
		</select>
		Zainteresowania: 
		<select name="zainteresowania[]" multiple="multiple">
			<option value=1”>Pływanie</option>
			<option value=2”>Muzyka</option>
			(...)
		</select>
		<textarea name="komentarz">Wpisz komentarz </textarea>
		<input type="hidden" name="nr" value="354634" />
		<input type="submit" value="wyślij" />
	</div>
</form>

Większość kontrolek formularza to pola „input”. Ich rola i funkcje są zróżnicowane w zależności od atrybutu „type”. Wartości z tych pól będą dostępne w skrypcie php poprzez nazwy – atrybut „name”. Wartości pól mogą być określone w atrybutach „value”. Domyślną wartością atrybutu „type” jest „text”. Pola tego typu pozwalają na wprowadzenie krótkiej informacji tekstowej w pojedynczej linii. Jeżeli chcemy, by pole zawierało od razu jakiś tekst, należy umieścić go w atrybucie „value”. Do wpisywania haseł przeznaczony jest typ „password”. Od typu „text” różni go jedynie maskowanie wpisywanych znaków kropkami. Pole typu „checkbox” jest polem wyboru mającym postać małego kwadratu do zaznaczania i odznaczania myszką. Po wysłaniu formularza z zaznaczonym polem „checkbox” w skrypcie pod nazwą z atrybutu „name” tego pola dostępna będzie wartość z atrybutu „value” lub 1, jeżeli „value” nie zdefiniowano. Aby umieścić w formularzu zaznaczone pole „checkbox” należy dodać atrybut „checked” o wartości „checked”.

Pola opcji czyli przełączniki w formie kółek do zaznaczania (zaznaczenie jednego automatycznie odznacza inne) uzyskujemy stosując typ „radio”. Pola tego typu są grupowane ze sobą dzięki identycznej wartości atrybutu „name”. Tylko jedno pole o takim samym atrybucie „name” może być zaznaczone. W skrypcie php dostępna będzie wartość właśnie z tego zaznaczonego pola. Typ „hidden” pozwala dołączyć do formularza dane nie wprowadzane przez osobę wypełniającą formularz, a wygenerowane na stronie. Możemy w ten sposób dołączać informacje o stronie, z której dana osoba weszła, stronie na której został wypełniony formularz (jeżeli mamy kilka identycznych formularzy na różnych stronach takie informacje mogą okazać się bardzo przydatne), informacje o ustawieniach i personalizacji strony itp.

Ostatni typ pola input, który opiszę jest przyciskiem wysyłającym formularz. Typem tym jest „submit”. Poza wyglądem charakterystyczną jego cechą jest to, że wartość atrybutu „value” jest wyświetlana jako tekst przycisku.

Poza elementami „input” w formularzu mogą znaleźć się inne kontrolki. Pole tekstowe do wpisywania wielu linii tekstu otrzymujemy dzięki znacznikom „<textarea></textarea>”. Znacznik ten posiada atrybut „name” natomiast nie posiada atrybutu „value”. Wartością wyświetlaną w formularzu i przesyłaną do skryptu php jest tekst pomiędzy znacznikiem otwierającym i zamykającym. Listę wyboru uzyskujemy wstawiając znaczniki „<select></select>”, a między nimi „<option></option>” dla każdej pozycji na liście. Atrybut „name” jest definiowany dla zancznika „<select>”, a „value” dla znaczników „<option>”. Nazwami wyświetlanymi na liści będą teksty pomiędzy znacznikami „<option></option>”. Jeżeli nie zdefiniujemy atrybutów „value”, to wartością znacznika będzie tekst wyświetlany. Domyślnie wybrany jest pierwszy element listy. Można to zmienić umieszczając w wybranym znaczniku „<option>” atrybut „selected” o wartości „selected”. Jeżeli potrzebujemy listy, z której można wybrać jednocześnie kilka opcji, to do znaczników „<select></select>” należy dodać atrybut „multiple” o wartości „multiple”, a do atrybutu name dodać na końcu „[]” – dzięki temu odpowiednia zmienna w skrypcie php będzie tablicą. Wybór wielu pozycji na takiej liście odbywa się poprzez przytrzymanie klawisza „ctrl” na klawiaturze i klikaniu wybranych pozycji.

O odbieraniu danych w php napiszę wkrótce.



Jak używać funkcji round()

środa, 2 Grudzień 2009

Php ma wiele dosyć ciekawych funkcji. Dzisiaj postanowiłem opisać jedną z nich. Funkcja round() zwraca zaokrągloną wartość pierwszego argumentu z dokładnością do miejsca podaną w drugim argumencie. Drugi argument jest opcjonalny i domyślnie wynosi 0. Zaokrąglanie odbywa się zgodnie z regułami matematycznymi. Czyli:

<?php
echo round(13.4);
?>

wyświetli liczbę 13, a kod:

<?php
echo round(32.5);
?>

wyświetli liczbę 33. Podanie jawnie drugiego argumentu o wartości 0 nie wnosi niczego nowego w działaniu funkcji. Kod:

<?php
echo round(12.6, 0);
?>

wyświetli liczbę 13. Natomiast przy wartościach większych od zera, zaokrąglenia dokonuje się do części dziesiątych, setnych, tysięcznych…

<?php
echo round(3.976323, 2);
?>

Powyższy kod wyświetli nam 3.98. Przy wartościach mniejszych od zera drugiego argumentu, zaokrąglanie obywa się do dziesiątek, setek, tysięcy…

<?php
echo round(3421757, -3);
?>

Powyższy kod wyświetli 3422000