Kurs tworzenia stron www dla początkujących - CSS, HTML, PHP, MySQL, JavaScript

Właściwie to kurs tworzenia stron to za dużo powiedziane, ale przedstawię w tym artykule podstawowe, przydatne informacje dla osób chcących zacząć przygodę z tworzeniem stron internetowych.
Osoby, które projektują strony www stosunkowo niedługi lub po prostu nie czują się w tym dobre, też znajdą tu informację czy czasem nie idą w złym kierunku. Na samym początku warto poznać same podstawy, czyli jaki język do czego służy (a raczej do czego powinien.. bo wiadomo, że Polak potrafi i jak zechce będzie serfował na desce od prasowania).

HTML

HTML służy do tworzenia szkieletu strony - warstwy logicznej (nagłówek, menu, stopka, treść, akapit itp) - nie powinno używać się HTML'a do kształtowania wyglądu strony, czyli kolorów tła, kroju czcionki, wymiarów czegokolwiek (bloków tekstu, czcionki, nagłówka itp). Należy sobie wbić raz na zawsze: HTML odpowiada za podział treści strony w logiczne części.

CSS

Kaskadowe arkusze stylu, czyli CSS służą do kształtowania wyglądu naszej strony. Czyli stworzyliśmy za pomocą HTML'a szkielet strony (nagłówek, menu, blok tekstu głównego, stopkę itp) i teraz za pomocą CSS możemy wywrzeć wpływ na wygląd tych elementów, czyli wielkość, marginesy, ułożenie (relacje między sobą) kolor itp. CSS możemy dołączyć (w zasadzie powinniśmy tak robić) do zewnętrznego pliku. Wskazywanie za pomocą CSS na konkretne elementy znaczników HTML'a odbywa się za pomocą klas (class="nazwa") i identyfikatorów (id="nazwa").

HTML i CSS służy do wykonywania stron statycznych. Jeżeli chcemy mieć stronę dynamiczną (CMS, forum, portal itp) z pomocą przychodzi nam PHP.

PHP

PHP jest to język programowania zbliżony do C/C++ działający po stronie serwera (czyli na naszym hostingu). Wg. mnie jest dość prosty, prostszy niż C/C++ (dlatego, że jego składnia jest znacznie uproszczona, np brak deklaracji zmiennych oraz posiada bardzo pokaźną bazę wbudowanych funkcji) niektórzy twierdzą, że przez takie uproszczenie łatwiej się programuje i łatwiej się popełnia błędy - być może to prawda, mi ciężko to ocenić (raczej koduje tylko w PHP).
Do czego nam się przyda PHP? Jeżeli chcemy stworzyć dynamiczną stronę, to piszemy skrypt właśnie w PHP, który np. "skleja" nam nagłówek, menu, treść i stopkę. W zależności od wyboru w menu skrypt doklei nam właściwą treść do nagłówka menu i stopki. To taki najprostszy przykład.
Warto dodać (dla tych zielonych zwłaszcza), że PHP na serwerze generuje kod HTML i wysyła go do przeglądarki. Tak więc nie da się podejrzeć kodu PHP jakiejś strony, zobaczymy tylko efekt tego skryptu, czyli wspomniany wygenerowany kod HTML. Dodatkowo wniosek z tego nasuwa się oczywisty - PHP jest generatorem HTML'a, w związku z tym sam w sobie nie służy do tworzenia stron i aby z niego zrobić użytek trzeba znać się na HTML'u.

MySQL

MySQL to rodzaj bazy danych SQL - jeden z najpopularniejszych (m.in. stosowany prze zemnie ;) ). Baza danych przychodzi nam z pomocą jeżeli mamy dość obszerną stronę, która cały czas się rozwija - przybywa jej treści. Czyli jest to np. forum, portal, blog itp. MySQL jest oparty na zapytaniach SQL (podobnie jak MS Access). Wszelkie dane MySQL możemy przedstawić właśnie w takich zapytaniach. Ale sama baza nam nic nie da. Aby korzystać z MySQL trzeba także korzystać z PHP. Za pomocą PHP łączymy się z naszą bazą danych, wysyłamy do niej zapytanie (np. "pobierz listę userów" - "SELECT * FROM tabela_userzy") pobieramy odpowiedź w postaci tablicy PHP i robimy z tym dalej co chcemy, np. wyświetlamy listę userów).

W dzisiejszych czasach rozwój stron WWW jest bardzo szybki i sam HTML to już za mało. Coraz częściej konieczne jest połączenie HTML+CSS+PHP+MySQL. Ale to nie wszystko

JavaScript

JavaScript, w skrócie JS jest to język służący do pisania skryptów działających po stronie klienta - czyli w naszej przeglądarce. Skrypt jest przesyłany do przeglądarki na naszym komputerze i wykonuje jakąś akcję. W niektórych przypadkach jest dość dużym ułatwieniem. Prosty przykład: piszę teraz ten poradnik i chcę dodać pogrubienie, zaznaczam tekst w edytorze, klikam na przycisk pogrubienia, JS wykonuje akcję - dodaje odpowiedni bbcode do tekstu w edytorze.
To tylko mały przykład. Ale JS w połączeniu z innymi językami potrafi być potężnym narzędziem dodającym duża interaktywność na stronie i zmniejszający obciążenie serwera (np AJAX).


Podsumowując wszystko
Chcemy zacząć tworzyć www? Zacznijmy we właściwej kolejności, takiej jak podałem, czyli najpierw zaczynamy naukę od HTML, potem CSS, PHP, MySQL. Jeszcze zostaje JavaScript, zostawiłem na koniec, bo nie jest to niezbędne do tworzenia stron, ja np. korzystam z gotowych rozwiązań. Jak byśmy chcieli zacząć uczyć się JS to na pewno powinno to mieć miejsce po opanowaniu HTML' i CSS.

Opisze dość skrótowo zagadnienie budowy strony opartej na tabelach. Przedstawię wady takiego rozwiązania i zalety (o ile przyjdą mi jakieś do głowy podczas pisania). Określenie strona oparta na tabelach odnosi się do głównej konstrukcji strony jak i jej mniejszych elementów. W praktyce często objawia się to poprzez ukrycie obramowania tabeli i wielokrotne zagnieżdżanie ich w sobie. Tworzy się wtedy swoista siatka, na której można projektować stronę. Przykładowo główna tabela ma wymiary 1x3 -...

Każdy by chciał mieć zaokrąglone rogi na swojej stronie internetowej. Praktycznie jak ich nie ma to strona nie nadaje się do oglądania Trzeba nadążać za trendami mody inaczej skończymy marnie Jeszcze jakiś czas temu było to dość kłopotliwe. Takie zaokrąglenia trzeba było wykonać przy użyciu plików graficznych. Na szczęście teraz jest dużo prostsza metoda. Z pomocą przychodzi nam CSS3. Aby zaokrąglić jakiś element, wystarczy dodać taki kod do swojego CSS: Kod CSS: Zaznacz .element_z_zao...

Nie raz szukałem w internecie zapisu skróconej instrukcji warunkowej if. Często się przydaje, zwłaszcza podczas przypisywania wartości dla zmiennej. W tym wypadku będzie to warunkowe przypisanie wartości dla zmiennej. Nie ma co za dużo pisać, takie sprawy najlepiej się objaśnia i obrazuje na przykładach. Standardowa instrukcja if: Kod PHP: Zaznacz if ($warunek) { // wykonaj jeśli $warunek jest spełniony}else { // wykonaj jeśli $warunek nie jest spełniony} Nieco krótsza wersja instrukc...