Podczas tworzenia strony internetowej lub bloga możemy skorzystać z trzech głównych źródeł szablonów graficznych:

1. Strony internetowe z darmowymi szablonami
2. Sklepy z szablonami płatnymi
3. Szablony wykonane na indywidualne zamówienie

Każde z tych źródeł ma swoje wady i zalety. Warto przed przystąpieniem do projektowania strony rozważyć wszystkie możliwości i wybrać tę, która najlepiej spełni nasze potrzeby.

Darmowe szablony WordPress

Jeśli chodzi o szablony darmowe to oczywiście największą zaletą jest możliwość pobrania ich oraz używania na stronie bez ponoszenia opłat. Niestety w tej grupie najczęściej ciężko znaleźć szablony wysokiej jakości – zarówno pod kątem wyglądu jak i wbudowanych funkcji. Mimo to bardzo często można spotkać takie, które mocno się wyróżniają. Warto więc poświęcić trochę czasu na poszukiwania.

Polecam rozpocząć od strony: http://wordpress.org/extend/themes czyli od standardowego katalogu WordPress. W drugiej kolejności warto przyjrzeć się stronie http://wordpressthemesbase.com

Sklepy z szablonami WordPress

Zaletą płatnych szablonów jest ich znacznie wyższa jakość niż w przypadku szablonów darmowych. Ceny natomiast są przeważnie bardzo przystępne – znacznie niższe niż w przypadku chęci zamówienia szablonu indywidualnego. Już za około 100 zł możesz zamówić profesjonalny szablon WordPress.

Kolejną zaletą jest to, że przed zakupem możesz zobaczyć jak mniej więcej będzie wyglądała Twoja, nowa strona. Opcje edycyjne płatnych szablonów są z reguły tak duże, że dają ogromne możliwości dopasowania ich do potrzeb Twojej firmy.

W przypadku szablonów płatnych wybór jest bardzo duży. Na szczególną uwagę zasługują poniższe sklepy:

• http://themeforest.net
• http://www.elegantthemes.com
• http://www.woothemes.com
• http://themify.me
• http://www.wpexplorer.com
• http://www.mojo-themes.com

Jeśli mimo to nie udało Ci się znaleźć nic, co spełniałoby Twoje wymagania to skontaktuj się ze mną. Pomogę w dobraniu odpowiedniego szablonu lub wykonam go specjalnie dla Ciebie. W tym celu skorzystaj z zakładki Kontakt.

Jak dodać zdjęcie?

W celu dodania zdjęcia wejdź w menu Media / Dodaj nowe. Pojawi się standardowy uploader.

Kliknij w przycisk Wybierz pliki. Z okna zarządzania plikami wybierz z dysku dowolne zdjęcie lub obrazek. Po chwili zobaczysz okno edycji parametrów zdjęcia.

Możesz tutaj zmienić tytuł, dodać tekst alternatywny, etykietę oraz opis. Na dole zobaczysz także adres url, który odwołuje się do tego pliku. Po wprowadzeniu zmian kliknij Zapisz wszystkie zmiany. Teraz zdjęcie znajduje się już w WordPressie i możemy przypisać je do strony lub wpisu.

Wybierz z menu Wpisy / Dodaj nowy lub wybierz z listy Wpisy / Wszystkie wpisy już istniejący wpis, do którego chcesz dodać zdjęcie i kliknij Edytuj. Przejdź do edytora i ustaw wskaźnik tekstu w miejscu w którym chcesz umieścić obrazek. Kliknij w pierwszą ikonę nad edytorem

Zobaczysz okno Dodaj obrazek. Możesz w tym miejscu bezpośrednio załadować zdjęcie z dysku dokładnie w taki sam sposób jak poprzednio – w większości wypadków jest to najwygodniejsza opcja. Możesz także skorzystać z już wgranych zdjęć klikając w zakładkę Biblioteka mediów (wszystkie zdjęcia) lub Galeria (zdjęcia przypisane do wpisu, który edytujesz). Jako że wcześniej wgraliśmy już zdjęcie na serwer skorzystamy z drugiej opcji. Po kliknięciu w Biblioteka Mediów pokaże się lista zdjęć. Przy wybranym zdjęciu kliknij w link Pokaż, aby rozwinąć opcje zdjęcia.

Na górze zobaczysz miniaturkę oraz podstawowe informację o pliku. Zwróć uwagę, że pod miniaturką znajduje się przycisk Edytuj obrazek. Jest to bardzo prosty edytor, który pozwoli Ci wykonać podstawowe operacje na pliku: pomniejszyć, przyciąć, obrócić itp.

Jeśli już edytowałeś zdjęcie i jesteś zadowolony z efektu możesz zdecydować w jaki sposób zdjęcie ma być umieszczone na stronie. Wybierz wyrównanie: brak, do lewej, do środka lub do prawej. W tym miejscu możesz także zdecydować o rozmiarze zdjęcia: miniatura, średni, duży lub pełny rozmiar (oryginalny, taki jak w pliku, który wgrałeś). Dokładne rozmiary zależą od szablonu strony. WordPress sam zajmie się dopasowaniem wymiarów pliku.

Zwróć także uwagę na pole tekstowe Adres url odnośnika. W tym miejscu możesz wprowadzić adres strony, do której zostanie przekierowany użytkownik po kliknięciu w zdjęcie. Jeśli nie chcesz, aby link był aktywny po prostu usuń zawartość z tego pola lub kliknij w przycisk Brak. Po wszystkich tych operacjach możesz już wstawić zdjęcie do wpisu klikając w przycisk Wstaw do wpisu. Zdjęcie dodane!

Co jeśli teraz chcielibyśmy coś w nim zmienić? To bardzo proste – wystarczy kliknąć myszką na wybrany obrazek. W lewym górnym rogu pojawią się dwie ikonki. Pierwsza z nich służy do edycji zdjęcia, a druga do jego usunięcia. Pamiętaj, żeby po tych wszystkich operacjach zaktualizować wpis.

Jak przeglądać wszystkie dodane zdjęcia?

Służy do tego panel Biblioteka Mediów. Możemy się do niego dostać klikając w menu Media / Biblioteka. Znajdują się tu wszystkie pliki dodane do WP czyli między innymi pliki graficzne. Ok wejdźmy zatem do biblioteki multimediów i zobaczmy jak ona wygląda

Jak widać mamy tu listę wszystkich plików w postaci miniaturki, nazwy pliku, autora (użytkownika, który dodał zdjęcie do WP), daty dodania pliku, a także informacji o tym czy zdjęcie jest przypisanie do jakiegoś wpisu lub strony.

Na liście możemy oczywiście wykonywać standardowe operacje takie jak sortowanie po wybranej kolumnie oraz usuwanie zdjęć z serwera. Pamiętaj o tym, że zdjęcie które usuniesz znika całkowicie i nie da się go już przywrócić – nie ma tu mechanizmu Kosza tak jak w innych zakładkach.

Mam nadzieję, że podobał Ci się ten artykuł. Jeśli masz jakieś uwagi lub sugestie proszę napisz komentarz poniżej.

Od czego zacząć?

Samo założenie konta w systemie statystyk GA jest bardzo proste i sprowadza się do wejścia na stronę http://www.google.com/analytics/, a następnie wybrania opcji Access Analytics. Jeśli masz już konto, do którego są przypisane inne usługi Google takie jak Gmail itp. to możesz się do niego po prostu zalogować i przejść od razu na sam dół artykułu do akapitu Instalacja Google Analytics na stronie WordPress. Jeśli nie posiadasz konta, kliknij w link Sign up for a new Google Account i wypełnij formularz, który widnieje na stronie.

Po założeniu konta w Google i wejściu na stronę Google Analytics, otrzymasz opcję tworzenia wewnętrznych kont. Dla jednego konta w Google możesz mieć wiele kont wewnętrznych Google Analytics, w których z kolei może być utworzonych wiele stron internetowych. Na początku dodamy tylko jedno konto i jedną stronę.

Aby dodać konto GA kliknij w przycisk +Add new account znajdujący się na belce panelu Accounts po prawej stronie.

W tym miejscu ukaże Ci się kolejny formularz, w którym będziesz mógł już dodać swoją stronę internetową

Wpisz wszystkie wymagane informacje: adres strony internetowej (bez http), nazwę konta i wybierz swoją strefę czasową. W następnym kroku wpisz swoje imię i nazwisko i wybierz miasto, w którym mieszkasz.

Następnie Google poprosi Cię o zapoznanie się z regulaminem świadczenia usługi i jego akceptację. Jeśli warunki Ci odpowiadają to potwierdzasz i przechodzisz do następnego kroku klikając w Create New Account. To wszystko. Możesz skopiować kod śledzący, który otrzymasz w ostatnim kroku rejestracji, ale nie jest to koniecznie ponieważ skorzystamy z wtyczki, która sama go pobierze z profilu GA. Aby ułatwić sobie kolejne zadanie nie wylogowuj się z konta Google.

Instalacja Google Analytics na stronie WordPress

Przejdź do panelu administracyjnego swojego WordPressa. Kliknij w menu Wtyczki / Dodaj nową i w wyszukiwarcę wpisz „Google Analytics for WordPress”. Po odnalezieniu wtyczki na liście kliknij Zainstaluj, a następnie Włącz. Opcje wtyczki znajdują się w sekcji Ustawienia / Google Analytics.

Kliknij w przycisk Click here to authenticate with Google, aby WordPress mógł się połączyć z Twoim kontem Google. Jeśli jesteś nadal zalogowany do konta GA to wszystko powinno zrobić się automatycznie i na następnym screenie otrzymasz możliwość wyboru konta oraz profilu strony.

Wybierz odpowiednie opcje i kliknij w Update Google Analytics Settings. Pozostałe ustawienia mogą pozostać niezmienione. I to wszystko. Statystyki powinny zacząć działać natychmiastowo. O tym, czy wszystko działa prawidłowo przekonasz się następnego dnia logując się do konta i obserwując wyniki pomiarów.

Czy zainteresował Cię ten artykuł? Masz może jakieś dodatkowe pytania lub uwagi? Napisz proszę komentarz poniżej.

Aby dodać nowe menu lub edytować już istniejące należy w panelu administracyjnym wejść w opcje Wygląd / Menu.

Po wejściu ukaże nam się taki oto obraz

Pierwsza czynność jaką należy wykonać to utworzenie nowego menu. W tym celu należy w prawym oknie kliknąć w znak plusa, a następnie wprowadzić nazwę nowego menu.

Po wpisaniu nazwy kliknąć w Utwórz menu. Ok mamy gotowe menu. Teraz musimy je przypisać do odpowiedniego miejsca na stronie. Szablony, które obsługują system tworzenia menu mają wbudowane obszary, w których możemy je umieszczać. Przeważnie jest to nagłówek oraz stopka. Miejsca, w których możesz umieścić menu zobaczysz w oknie Położenia motywów.

Po wybraniu odpowiedniego miejsca oraz menu, które ma być do niego przypisane klikamy w Zapisz. Menu jest już przypisane do miejsca i możemy zabrać się za jego uzupełnianie.

Poniżej w lewej kolumnie mamy możliwość dodania kilku rodzajów linków: zewnętrznego adresu strony ( jest to dowolny adres innej strony www ), adresu wewnętrznego ( dowolnej podstrony WordPresss ), a także kategorii.

Po zaznaczeniu elementów, które chcemy umieścić w menu klikamy Dodaj do menu. Zaznaczone linki zostaną przekopiowane do prawej kolumny i co za tym idzie umieszczone w naszym menu.

Zwróć uwagę, że możesz z łatwością ustawić kolejność stron po prostu przeciągająć poszczególne elementy między sobą. Po rozwinięciu danej zakładki możesz zmienić etykietę czyli nazwę, która będzie się pojawiała w menu. Już nie musisz nazywać stron dokładnie tak samo jak chciałbyś je widzieć w menu. Możesz tutaj także usunąć dany element.

Aby utworzyć podmenu wystarczy wybrany element przesunąć troszkę w prawo – wsunąć pod element nadrzędny.

Pamiętaj, żeby po każdej zmianie ponownie kliknąć Zapisz menu. Czy ten artykuł był dla Ciebie przydatny? Proszę o komentarz poniżej.

Budowa strony internetowej

Kiedy szczegółowo spojrzymy na budowę każdej strony internetowej to uda nam się wyróżnić w niej 3 warstwy:

1. warstwę struktury oraz treści
2. warstwę zachowania
3. warstwę prezentacji – wizualną

Warstwa struktury oraz treści jak już wcześniej zaznaczyłem znajduje się w plikach html. Większość treści w dzisiejszych stronach internetowych to tekst, ale może być ona dostarczana także w postaci obrazów, filmów, dźwięków itp.

Warstwa zachowania opisuje to w jaki sposób przebiega interakcja strony z odbiorcą i przeważnie odbywa się ona z wykorzystaniem języka javascript, o którym także wspomnę w innych artykułach.

Warstwa prezentacji, którą zajmujemy się w tym artykule definiuje w jaki sposób treść jest przedstawiana dla jej odbiorcy.

Co to jest CSS?

CSS czyli tzw. kaskadowe arkusze stylów są rekomendowanym sposobem kontroli sposobu tworzenia warstwy prezentacyjnej strony internetowej. Główną zaletą wykorzystania plików CSS do opisu wizualnych aspektów strony jest możliwość trzymania ich w osobnych plikach. Bardzo istotne jest byś stosował zasadę oddzielania struktury strony od opisu jej prezentacji. Właśnie po to, aby ułatwić Ci to zadanie powstał CSS.

Przejdźmy więc do konkretów i zobaczmy jak szybko można za pomocą CSS zmienić wygląd strony internetowej. Utwórz najpierw przykładowy plik index.html. Jeśli masz zapisane kody źródłowe z poprzedniej lekcji to możesz je oczywiście tutaj wykorzystać. Jeśli nie to wklej do pliku index.html poniższy kod.

<!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">
 <head>
  <title>Moja strona www</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="main.css" type="text/css" />
 </head>
 <body>
  <p>Akapit</p>
 </body>
</html>

Jak widzisz w sekcji head strony pojawił się nowy znacznik:

<link rel="stylesheet" href="main.css" type="text/css" />

Właśnie w taki sposób „doklejasz” do pliku html arkusze css. Parametr rel, „mówi” przeglądarce, że będziemy dołączać plik arkusza stylów, a href wskazuje gdzie znajduje się ten plik i jaką ma nazwę. Jako, że nie wpisaliśmy w tym miejscu żadnego katalogu to musimy utworzyć plik main.css w tym samym katalogu w jakim znajduje się nasz plik index.html. Utwórz więc plik main.css i otwórz go za pomocą Notepad2. Następnie wklej tam poniższy kod i zapisz plik.

p { color: red; }

Otwórzy plik index.html i zobacz efekt w przeglądarce. Jak widzisz kolor tekstu w akapicie zmienił się z czarnego (domyślnego) na czerwony. W bardzo prosty sposób za pomocą jednej linijki w pliku css zmieniliśmy kolor wszystkich akapitów na stronie. Jeśli chcesz zobaczyć, że działa to także dla innych akapitów to po prostu dopisz kolejny tag <p> poniżej tego, który już znajduje się w pliku index.html. Zauważ, że dzięki temu, że definicja koloru elementów znajduje się w osobnym pliku możemy bardzo łatwo i szybko zmienić kolor wszystkich elementów danego typu zamiast definiować kolor dla każdego z nich z osobna w pliku html.

Teraz w skrócie opiszę z czego składają się definicje zawarte w plikach css

1. selektor – jest to wzór, dzięki któremu przeglądarka posiada informację do jakich elementów ma stosować reguły zawarte w tej definicji. W naszym przypadku zastosowaliśmy selektor ogólny (p), który oznacza nic innego jak zastosuj reguły do wszystkich elementów <p> na stronie. Istnieje wiele sposobów tworzenia selektorów, które pozwalają nam z bardzo dużą dokładnością wybierać cele działania danej definicji. Za pomocą odpowiednich selektorów możemy wybrać konkretny obiekt, listę obiektów itp. W kolejnych artykułach będę opisywał dokładniej działanie różnych selektorów.
2. w nawiasach klamrowych lista deklaracji oddzielonych od siebie znakiem średnika - poszczególne deklaracje składają się z właściwości i przypisanych do nich wartości. W naszym przypadku właściwość color (kolor tekstu) ma wartość red (czerwony) co oczywiście powoduje, że kolor tekstu zmienia się na czerwony. Istnieje masa właściwości oraz wiele sposobów na opisanie wartości (poprzez słowa kluczowe, jednostki takie jak piksele itp.) Ten artykuł ma oczywiście na celu tylko wstępne zapoznanie Cię z zasadą działania CSS, a nie przedstawienie wszystkich właściwości i parametrów. Wiedz też, że wcale nie musisz znać wszystkich tajników CSS, aby z powodzeniem budować zaawansowane strony internetowe.

W kolejnych wpisach w miarę postępów będę opisywał wybrane parametry i ich szczegółowe działanie potrzebne do rozwiązania konkretnych problemów, które możesz napotkać podczas budowy strony www. Zachęcam także do pobrania ściągi css, która zawiera wszystkie najważniejsze właściwości CSS. Ściągę CSS, a także HTML możesz pobrać na górze po prawej stronie bloga. Jak zwykle Twój komentarz oraz pytania są mile widziane.

Jak zbudowana jest strona internetowa?

Na początku musisz dowiedzieć się jak zbudowana jest każda strona. Strona www to nic innego jak zestaw plików. Dokładnie takich samych jak te w katalogach na dysku Twojego komputera. Jakiego rodzaju są to pliki? W większości zwykłe pliki tekstowe z tą różnicą, że mają specyficzne rozszerzenia. Będą to w szczególności pliki z rozszerzeniem .html czyli pliki tekstowe zawierające w sobie kod html opisujący strukturę strony, a także pliki .css czyli pliki tekstowe zawierające w sobie opis wizualny strony. Oprócz tego w skład strony wchodzą pliki graficzne czyli zawierające elementy wizualne strony takie jak tła oraz inne elementy designu – menu, logo itp. Pliki graficzne, z których możemy korzystać to przeważnie te z rozszerzeniami: .gif, .png oraz .jpg. Rodzaje plików graficznych różnią się od siebie wieloma czynnikami tj. kompresją, liczbą możliwych kolorów itp. i bardzo ważne jest żeby odpowiednich typów plików używać w odpowiednich miejscach i przypadkach dlatego napiszę osobny artykuł na ten temat.

Z czego składa się plik HTML?

Dziś zajmiemy się podstawowym budulcem strony czyli plikami .html, a w szczególności plikiem index.html, który w większości przypadków jest punktem wyjścia, aby obejrzeć stronę w przeglądarce. Plik index.html jest w sposób szczególny traktowany przez przeglądarki. Jeśli przeglądarka trafi na ten plik na serwerze to traktuje go jako domyślny i w pierwszej kolejności otwiera właśnie jego. Dlatego właśnie zaczniemy od stworzenia tego pliku.

Zanim jednak przejdziemy do pisania pierwszej strony musimy mieć do tego odpowiednie narzędzie. Jako, że będziemy tworzyć pliki tekstowe to do ich pisania na początek wystarczy nam zwykły Notatnik – taki sam w jakim piszę ten artykuł. Niestety Notatnik, który normalnie jest w Windowsie nie nadaje się do tego zbyt dobrze. Jeśli używasz Windowsa to polecam, abyś w tej chwili ściągnął sobie program Notepad2. Można go zapisać na pulpicie i uruchamiać bez instalacji więc jest to bardzo wygodne. Jeśli natomiast korzystasz z Maca to myślę, że najlepszym wyborem będzie TextMate.

Jest oczywiście wiele tego typu programów do wyboru i każdy z nich ma swoje wady i zalety, ale żeby nie przedłużać to zaczniemy od najprostszych rozwiązań. w innym artykule opiszę, programy do edycji plików stron z zaznaczeniem, w których przypadkach, z którego najlepiej skorzystać. Jeśli masz już na swoim komputerze program Notepad2 to możesz go otworzyć. Na pulpicie utwórz sobie katalog o nazwie np. „mojastrona” i zapisz w nim za pomocą notatnika pusty plik o nazwie index.html. Jeśli teraz wejdziesz do tego katalogu to zobaczysz, że jako ikonka pliku pojawi się ikona przeglądarki której używasz. Oznacza to, że ten plik jest już widziany przez Twój komputer jako strona www. Gratulację właśnie stworzyłeś swoją pierwszą stronę

Oczywiście jeśli otworzysz ten plik przez kliknięcie na niego dwa razy to w przeglądarce zobaczysz puste okno – nic dziwnego jeśli nic jeszcze tam nie umieściliśmy. Wejdź więc ponownie do notatnika i wklej poniższy przykładowy kod do pliku index.html:

<!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">
 <head>
  <title>Moja strona internetowa</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
 </body>
</html>

Zapisz plik i odśwież przeglądarkę. Wbrew pozorom nic się nie zmieniło, ale jeśli spojrzysz na górną belkę przeglądarki to zobaczysz tam tytuł strony – „Moja strona internetowa”. Dokładnie ten sam, który został umieszczony w pliku index.html między tagami <title></title>. Jeśli te znaczki w tej chwili nic Ci nie mówią to nic się nie martw. W miarę czasu wszystko się wyjaśni. Na razie zobaczmy po kolei z czego składa się nasz plik index.html.

Co to są tagi?

Każdy dokument strony internetowej składa się z tzw. tagów. Są to znaczniki, które mówią przeglądarce z jakim elementem ma w danym miejscu do czynienia. Większość tagów ma swój początek i koniec. Wygląda to w taki sposób: <tag>zawartość tagu</tag> czyli:

1. nazwa tagu w nawiasie ostrokątnym (plus ewentualne parametry jego działania o czym niżej)
2. zawartość tagu
3. koniec tagu czyli taka sama nazwa tagu z tą różnicą, że poprzedzona znakiem slash (/)

Kiedy przeglądarka napotka na swojej drodze nawias ostrokątny to wie, że musi potraktować to co się w nim znajduje jako rozpoczynający się tag. Jeśli trafi na dokładnie taki sam znacznik tylko zawierający przed nazwą slash (/) to wie, że jest to koniec tego tagu i musi wyłączyć jego działanie.

Każdy znacznik ma więc swój początek i koniec. Przykład: <html> - początek kodu html, </html> - koniec kodu html. Są pewne wyjątki od tej reguły – niektóre tagi nie mają w ogóle zawartości o czym za chwilę. Każdy z tagów ma też ściśle określoną funkcję. Przykład: <b>pogrubienie</b>. W tym przypadku przeglądarka wie, że po napotkaniu <b> musi przełączyć wyświetlanie na tekst pogrubiony, a gdy napotka </b> musi wyłączyć pogrubianie. W praktyce wygląda to tak, że cały tekst zawarty między <b>, a </b> będzie pogrubiony. Cały plik html składa się właśnie z takich prostych znaczników. Jak widzisz nie ma tu więc, żadnych skomplikowany algorytmów, obliczeń itp.

Zacznijmy więc analizę pliku, który właśnie utworzyliśmy

Pierwsza linijka rozpoczynająca się od <!DOCTYPE to tzw. typ dokumentu. Jest to specjalny znacznik, który mówi przeglądarce z jakim rodzajem pliku ma do czynienia. Jako, że nasz plik jest zwykłym plikiem tekstowym to przeglądarka sama nie bardzo jest w stanie domyślić się co dokładnie jej zapisaliśmy w naszym pliku. Musimy ją więc poinformować co będzie w dalszej części dokumentu. Na początku nie widzę większego sensu, aby dokładnie tłumaczyć ten tag. Po prostu w tym momencie załóżmy, że ma on tam być w takiej postaci w jakiej jest. Przyjdzie odpowiednia pora, aby dowiedzieć się co tam jest zapisane. Nie jest to natomiast wiedza niezbędna by zbudować działającą stronę.

W drugiej linijce rozpoczyna się wreszcie nasza strona. Tag <html> wraz z parametrami jest głównym korzeniem strony, z którego będą wychodzić kolejne elementy. Jak widzisz tag oprócz nazwy może zawierać tzw. parametry czyli pewne właściwości, które wpisujemy po nazwie w postaci parametr=”wartość parametru”. Przykład z życia: wysokość=”400m” czyli wysokość wynosi 400 metrów. W przypadku tagu <html> nie musisz na razie wiedzieć co dokładnie mówią te parametry, które zapisaliśmy w naszym pliku poza tym, że informują one przeglądarkę o tzw. przestrzeni nazw i języku w jakim jest zapisana strona.

Bardzo ważne natomiast jest to, że jeden tag może zawierać w sobie inne tagi. Tak jest w przypadku tagu <html>, który w istocie zawiera w sobie wszystkie inne tagi. Zauważ, że tag <html> kończy się na samym dole pliku czyli obejmuje on całą stronę. Możesz sobie wyobrazić go jako korzeń drzewa, z którego później wychodzą kolejne gałęzie. Wszystko co znajduje się między otwarciem i zamknięciem tagu jest gałęzią w stosunku do tego tagu. Najlepiej chyba zilustrować to na obrazku.

Jak więc widzisz mamy tag <html>, który zawiera w sobie dwa kolejne tagi <head> oraz <body>. Te dwa tagi dzielą całą stroną na dwie części. Pierwszą zawierającą tzw. nagłówek (z ang. head), który jest źródłem informacji dla przeglądarki i drugi zawierający ciało dokumenty (z ang. body) czyli to wszystko co widzimy po otwarciu strony. Większość czasu przy budowie strony poświęca się na budowanie zawartości tagu <body>.

Jak widzisz w tagu <head> czyli w nagłówku strony zawarliśmy kolejny tag <title>, który mówi przeglądarce jaki tytuł ma strona – to ten tekst wyświetlany na górnym pasku przeglądarki oraz drugi tag <meta>, który w tym przypadku mówi przeglądarce między innymi jakiego kodowania znaków użyliśmy w dokumencie. Kodowanie znaków oraz znaczniki <meta> to temat na osobny artykuł więc w tej chwili to pominiemy. Zauważ natomiast, że <meta> jest przykładem tagu, który nie ma zawartości więc nie ma też początku i końca tylko po otwarciu od razu jest zamykany w taki sposób <meta />. Tego typu tag nie może więc już zawierać w sobie żadnych innych elementów strony.

Całość strony w postaci drzewa wygląda więc tak:

Skomplikujmy troszeczkę cały projekt. Wklej w pliku index.html zamiast poprzedniego kodu ten poniżej:

<!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">
 <head>
  <title>Moja strona internetowa</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <p>Moja pierwsza strona</p>
 </body>
</html>

Zapisz i odśwież stronę. Jak widzisz pojawił się napis „Moja pierwsza strona”. W tagu <body> umieściliśmy kolejny tag. Tym razem jest to <p> czyli akapit (z ang. paragraph), który wskazuje przeglądarce, aby jego zawartość wyświetlić jako akapit na stronie.

Drzewo dokumentu wygląda teraz tak:

Najważniejsze w tej lekcji jest to, aby zrozumieć jak za pomocą tagów budujemy strukturę strony w postaci drzewa. Otwarcie tagu powoduje „wyrastanie gałęzi”, na której mogą powstać kolejne gałęzie i tak w nieskończoność. Zauważ także, że w kodzie powstanie gałęzi jest wyraźnie zaznaczone poprzez wcięcie od lewej strony dokumentu. Jeden poziom wcięcia w kodzie to jeden poziom niżej w strukturze drzewa strony. Polecam zawsze używać tego typu wcięć, aby kod był przejrzysty i łatwy do przeczytania.

Niestety nie wiem czy udało mi się wyjaśnić temat w wystarczająco zrozumiały sposób. Myślę jednak, że jeśli spojrzysz na rysunki, który załączyłem oraz na kod html i porównasz jedno i drugie to szybko uzmysłowisz sobie o co chodzi. W istocie jest to jedna z najtrudniejszych rzeczy do pojęcia, więc jeśli przez to przejdziesz i dobrze zrozumiesz to reszta powinna być już prosta. Mam więc nadzieje, że ten artykuł nie zniechęcił Cię do nauki. Pamiętaj, że zawsze możesz zadać pytanie w komentarzu. Na każde z przyjemnością odpowiem więc korzystaj z okazji.

Czy każdy jest w stanie nauczyć się budować strony www?

Jak z każdą umiejętnością, odpowiednie podejście do tematu i praktyka jest kluczem do osiągnięcia celu. Nie musisz posiadać szczególnych zdolności, aby posiąść wiedzę na temat kreacji stron www. Uważam, że każda osoba, która opanowała podstawowe zdolności przyswajania wiedzy jest w stanie nauczyć się tego tematu i w niedalekiej przyszłości zacząć zarabiać na tym pieniądze.

Co możesz zrobić już teraz, aby rozpocząć naukę?

Nie ma co ukrywać, że w internecie już teraz znajdziesz wszystkie potrzebne informacje na ten temat. Ja uczyłem się właśnie w taki sposób. Dlatego możesz odpalić wyszukiwarkę Google i zacząć podróż na własną rękę. Musisz tylko zdawać sobie sprawę z tego, że zajmie to znacznie więcej czasu niż gdybyś miał do pomocy osobę, która już przez to wszystko przeszła. Właśnie po to powstała strona, na której jesteś.

Chciałbym zaproponować Ci towarzyszenie w tej podróży – po to, aby wskazać odpowiednią drogę do celu, pokazać przeszkody jakie czają się za zakrętem – po to, aby Twoja przeprawa była znacznie krótsza i przyjemniejsza. Jestem samoukiem i od kilku lat zajmuje się tworzeniem stron internetowych, przeszedłem dokładnie tą samą drogę, którą ty zamierzasz teraz przejść. Zaczynałem swoją przygodę jak duża część osób od darmowych  kursów HTML. Była to mozolna praca, ponieważ konieczne było przedarcie się przez masę zbędnych informacji, aby odkryć to co ważne i istotne. Teraz kiedy już mam wiedzę na temat tego co jest potrzebne na początku, a czym można przez jakiś czas nie zawracać sobie głowy postanowiłem część swojej energii i czasu przeznaczyć na pomoc Tobie. Oczywiście tylko od Ciebie zależy czy skorzystasz z moich porad.

Na tej stronie zamiast suchych informacji dostaniesz wiedzę czyli informacje uporządkowane w taki sposób, aby jak najszybciej przejść od etapu osoby „totalnie zielonej” do momentu, w którym samodzielnie zaprojektujesz pierwszą stronę www. Musisz zdać sobie sprawę, że w praktyce potrzebujesz około 20% całej wiedzy, aby wykonać 80% rodzajów stron internetowych. Zamierzam pokazać Ci właśnie te 20% wiedzy co pozwoli Ci szybko zacząć tworzyć komercyjne projekty, a później stopniowo będziesz mógł zacząć poznawać pozostałe 80%. To właśnie  wyróżnia tą stronę od darmowych kursów HTML, które są raczej czymś w rodzaju encyklopedii, która nie różnicuje informacji na mniej i bardziej istotne.  Oczywiście jeśli już teraz masz pewien zasób informacji na ten temat, nie oznacza, że nie znajdziesz tu dla siebie nic ciekawego.

Jak zbudowana jest strona www?

W wielkim skrócie strona internetowa to nic innego jak zwykły plik tekstowy sformatowany w taki sposób, aby przeglądarka internetowa wiedziała w jaki sposób ma stworzyć układ i przedstawić treść na stronie. Tak to, aż tak proste. Co jeśli nie masz talentu do nauki języków programowania? HTML, który jest głównym językiem opisu stron internetowych nie jest językiem programowania. Jest od nich znacznie prostszy. Plik stworzony w tym języku przypomina bardziej coś w rodzaju przepisu niż programu. Wpisujesz tekst, przekazujesz przeglądarce w jaki sposób ma go pokazać (pogrubiony, w kolorze czerwonym itp.) i to wszystko.

Oczywiście, niektóre elementy są bardziej skomplikowane od innych, ale w ostateczności wszystko sprowadza się do prostych poleceń za pomocą, których budujesz stronę jak zabawkę z klocków lego. Dodatkowo nigdy nie musisz sie uczyć wszystkiego na raz. Stopniowo odkrywasz nowe polecenia i zaczynasz tworzyć coraz bardziej skomplikowane projekty.

Po co w ogóle uczyć się tworzenia stron www?

Najkrótsza odpowiedź to po prostu dla pieniędzy. Może nie brzmi to zbyt górnolotnie, ale tak właśnie jest. Przy obecnym tempie rozwoju internetu takie umiejętności są coraz bardziej potrzebne. Możesz tworzyć strony w celach zarobkowych lub zaoszczędzić pieniądze pracując nad swoimi własnymi projektami zamiast zlecać to innej osobie. Drobne zmiany na gotowej stronie mogą kosztować czasami nawet setki złotych, a sprowadzają się niekiedy do zmiany dwóch linijek kodu strony. Czy nie byłoby rozsądnie zainwestować, trochę swojego czasu i w dłuższej perspektywie dużej ilości pieniędzy?

Obecnie osoba, która nie zna żadnego języka obcego jest praktycznie wykluczona z pewnych ról społecznych. Mam wrażenie, że wkrótce podobna sytuacja może mieć miejsce jeśli chodzi o technologie webowe. Coraz większą część życia spędzamy w internecie. Oczywiście narzędzia rozwijają się w takim kierunku, aby otworzyć się na osoby nieobeznane z technicznymi aspektami ich działania, ale młodsze osoby wchodzą w dorosłe życie już ze znacznie większą wiedzą na ten temat niż starsze pokolenia.

Powiedzieli mi że nie muszę znać HTML żeby robić strony!

Nie wierz wszystkiemu co mówią ludzie. Osoby, które tak mówią przeważnie mają inny cel niż Ty. Chcą sprzedać Ci jakieś oprogramowanie bądź usługę. Oczywiście są programy które pozwalają projektować strony bez wiedzy na temat języków ich opisu, ale w taki sposób nie zaprojektujesz profesjonalnej strony, a w przypadku  nawet niewielkich problemów i ograniczeń programu i tak będziesz musiał poznać szczegóły. To trochę tak jak wyjazd za granicę tylko z rozmówkami. Dogadasz się, ale znając język obcy rozmowy będą znacznie ciekawsze i przyjemniejsze.

Mam edytor WYSIWYG więc nie muszę znać HTML.

Nie ma nic złego w edytorach. Sam z nich często korzystam. Są to narzędzia, które pozwalają pracować znacznie efektywniej. Odpowiednim programem wykonasz pracę szybciej, jednak bez podstawowej wiedzy nie zbudujesz nic trwałego i profesjonalnego. Narzędzia do budowy domu także są ogólnodostępne, ale to nie znaczy, że wystarczy je mieć, by zbudować dom. Nawet jeśli skorzystasz z zaawansowanych narzędzi do budowy stron to tak czy inaczej zawsze trafisz na taki moment, że będziesz musiał sam ręcznie coś zmienić, żeby uzyskać dokładnie taki efekt jaki sobie założyłeś. Wtedy przydadzą Ci się informacje zawarte na tej stronie.

A co jeśli po prostu nie mam czasu na naukę?

Żeby poznać podstawy potrzeba około 2 godzin czasu. Wiem to z doświadczenia bo uczę ludzi w formie osobistych lekcji i  to w zupełności wystarczy, aby mniej więcej orientować się co jest grane i móc wprowadzać drobne poprawki do stron.  Kilka godzin więcej jest potrzebne, aby nauczyć się tworzenia prostych stron. Oczywiście jeśli uczysz się w odpowiedni sposób.

Odwiedzaj tę stronę częściej to przekonasz się na własnej skórze, że tak właśnie jest. Jeśli poświęcisz na naukę kilka miesięcy to  już zdobędziesz na tyle wiedzy, żeby projektować użyteczne dla klientów strony i zarabiać na tym. Pomyśl o tym, że każda dodatkowa  godzina nauki to dodatkowe pieniądze zaoszczędzone na Twoich stronach lub zarobione na klientach.

Jeśli zainteresował Cię ten temat to serdecznie zapraszam Cię do śledzenia kolejnych artykułów na tej stronie. Twój komentarz będzie tutaj zawsze mile widziany, więc nie krępuj się i jeśli już masz jakieś pytania to skorzystaj z formularza poniżej lub strony Kontakt, aby się ze mną skontaktować.

WordPress jest wyposażony w mechanizm ustawiania kolejności stron w menu. Po wejściu w edycję danej strony po prawej stronie w dodatkowych informacjach możemy znaleźć pole Order (Kolejność), które decyduje o kolejności strony w menu. Wystarczy dla, każdej strony wpisać odpowiedni numer kolejności (im większy tym dalej w menu), aby zmienić kolejność.

Oczywiście powyższy mechanizm jest dość uciążliwy. Jeśli dojdzie jakaś nowa strona i będziemy ją chcieli umieścić między już istniejącymi to będzie trzeba zmienić pole Order dla kilku stron, chyba że przewidzieliśmy to wcześniej i zrobiliśmy większe odstępy. Jest jednak prostszy sposób. Wystarczy doinstalować plugin do ustawiania kolejności stron np. pageMash. Za pomocą tego pluginu możemy metodą przeciągnij upuść ustawiać zarówno kolejność jak i zagłębienie poszczególnych stron i podstron.

Aktualizacja (30.10.2011): Od wersji WordPress 3.0 został na stałe dodany mechanizm tworzenia i edycji menu. Praktycznie wszystkie nowe szalony go obsługują. Możesz poczytać o tym systemie tutaj.

Dlatego zawsze należy dbać o to, aby nasze dane miały aktualną kopię bezpieczeństwa. Oczywiście zdaję sobie sprawę, że takie kopie to praca, która choć nie zajmuje dużo czasu to jest żmudna i nikomu się nie chce tego robić.

Dlatego właśnie opiszę dziś plugin do WordPress, który zadba o to, by w wyznaczonych przez nas odstępach czasu zrobić backup za nas. Plugin można ściągnąć tutaj:

http://wordpress.org/extend/plugins/dbc-backup/

Jest on banalnie prosty w obsłudze. Po instalacji i aktywacji w menu WordPress pojawi się nam nowe menu o nazwie: DB Cron Backup. Po wejściu w to menu zobaczymy ekran z kilkoma opcjami:

Opcji jest niewiele i konfiguracja nie powinna sprawić Ci dużego problemu. Export Directory to katalog, w którym plugin ma zapisywać backupy. Niżej możemy wybrać czy mają one być kompresowane, a jeśli tak to jaką metodą. Później ustalamy co jaki czas skrypt backupujący ma się uruchamiać oraz to co ma się dziać ze starszymi wersjami backupów.

Po zapisaniu skrypt zrobi za nas całą czarną robotę i już nie musimy martwić się o nasze dane. Myślę, że konfiguracja jest tak prosta, że nie sprawi Ci najmniejszej trudności. W razie czego możesz zawsze zadać pytanie w komentarzu.

Aktualizacja (30.10.2011): Obecnie polecam korzystanie z innego pluginu, a mianowicie BackWPup, który znajdziesz tutaj. Plugin ten jest na bieżąco aktualizowany i pozwala robić kopię bezpieczeństwa zarówno plików jak i całej bazy.

Czym zatem jest ta tajemnicza pętla? Jest to podstawowy składnik każdego szablonu i służy do wyświetlania wszystkich wpisów, stron archiwów itp. Jeśli WordPress natknie się na pętle podczas przetwarzania szablonu i wyświetlania strony to w zależności od tego na jakiej stronie znajduje się użytkownik wyświetli mu albo listę ostatnich wpisów, albo pojedynczy wpis bądź stronę statyczną itp.

Pętla powinna znajdować się w pliku index.php. Jeśli nie pamiętasz z jakich plików składa się szablon WP to wróć do poprzednich lekcji tworzenia szablonów. WordPress Loop to kilka linijek kodu php i ma taką postać:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
[tutaj wyświetlanie wpisów]
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Wszystko co znajduje się w miejscu [tutaj wyświetlanie wpisów] jest już zawartością pętli i tylko od nas zależy jak to wykorzystamy. Możemy w tym miejscu odwoływać się do wielu zmiennych takich jak nazwa wpisu, data utworzenia, autor itp. wyświetlać i formatować te dane zgodnie z naszym uznaniem. Przykładowa działająca pętla może wyglądać tak:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2
<small><?php the_time('F jS, Y'); ?></small>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Jak widać między tagami h2 wyświeliliśmy nazwę posta, która linkuje do jego zawartości, a poniżej datę utworzenia wpisu. I to wszystko co na tym etapie powinieneś wiedzieć o pętli WP. Wiesz już jak działa i z wiedzą, którą dziś otrzymałeś będziesz umiał ją zastosować.  Jeśli chcesz poznać pozostałe zmienne jakie można tu wyświelić to polecam przeglądnąć pliki defaultowych szablonów WP. W następnym odcinku kursu przejdziemy już do konkretów i przerobimy darmowy szablon html tak, aby działał pod WP.

Pytania i komentarze jak zwykle mile widziane.