Kurs Tworzenia Stron Internetowych

Kurs Tworzenia Stron Internetowych

0. Wstęp

W dzisiejszych czasach dostęp do Internetu staje się coraz bardziej powszechny i  praktycznie wszechobecny. Towarzyszy nam w pracy, szkole, a także w domu. Globalna sieć to bogate źródło informacji  praktycznie na każdy temat. Miliony stron WWW, a wszystko dostępne dla każdego podłączonego do sieci. 

Nic dziwnego że coraz więcej osób próbuje i zakłada swoje własne  witryny internetowe. Stąd też mój pomysł na kurs robienia stron WWW całkowicie od podstaw, dla każdego. Oczywiście jest całe mnóstwo książek o tym, a także sporo takich kursów można znaleźć w Internecie. Jednak większość z nich  jest napisana w trudnym języku, albo jest zbyt nasycona całym zbiorem czasem niepotrzebnych  kodów. Artykuł o pisaniu tekstu rzuca czytelnika od razu w wir kilkudziesięciu znaczników i ich zastosowań, które z początku nie są tak potrzebne a utrudniają zrozumienie . Dlatego stwierdziłem że spróbuje stworzyć kolejny kurs tworzenia stron ale troszkę z innej perspektywy. Zamiast spisu znaczników , napiszę o tym jak od podstaw stworzyć własną stronę internetową na konkretnym przykładzie. W kolejnych częściach kursu będziemy stopniowo ulepszać taką witrynę i uczyć się nowych sposobów jej budowania.

Od razu zastrzegam iż ma być to kurs  dla osób całkowicie początkujących. Ci którzy mieli już do czynienia z językiem HTML, nie znajda tu  póki co nic ciekawego.

Oczywiście nie jestem też ekspertem w sprawach tego języka,  i mogę pisać tylko o tym co sam się nauczyłem w ciągu kilku lat moich przygód z tworzeniem  stron. Tych którzy będą uważać to co piszę za śmieszne albo mało profesjonalne powiem od razu: jeśli umiesz zrobić, napisać lepiej to po prostu zrób. Ten kurs ma być przydatny przede wszystkim dla tych dla których programowanie i komputery to czarna magia, a chcieliby stworzyć np. swoją stronę domową.

Jest mnóstwo serwisów oferujących zakładanie stron bez żadnej wiedzy z zakresu języka HTML. Jednak czyż nie większą frajdą jest napisać coś samemu i potem podziwiać swe wyniki? Po za tym nawet dla osób czerpiących z gotowych rozwiązań znajomość html przyda się na pewno gdyż w wielu  takich serwisów można np. modyfikować stronę za pomocą własnego kodu html.

Kończąc ten wstęp mam nadzieję ze komuś przydadzą się informacje które będę tu zamieszczał. Czekam też na wasze opinie i komentarze. Piszcie też jeśli będziecie mieli problem z  zrozumieniem czegoś  (będę starał się pisać zrozumiale ale czasami różnie to wychodzi 😉 )

1. Zrozumieć www

        Aby rozpocząć próby tworzenia własnych stron internetowych , trzeba najpierw wiedzieć coś o samym Internecie i zasadach jakie w nim panują. Ktoś powie: Internet to Internet, nie ma w tym nic trudnego. Owszem, dla kogoś przeglądającego tylko strony i wysyłającego maile , Internet to przyjemna sprawa i nie widać w tym nic skomplikowanego. Jednak tworzenie stron internetowych wymaga wiedzy w jaki sposób właściwie te strony są wyświetlane, oraz jak działa globalna pajęczyna.

W tym miejscu powinienem być może podać definicje   Internetu , historie jego powstania itd. Jednak nie będę przynudzać takimi tekstami tym bardziej że to akurat potrzebne do szczęścia nam nie jest 😉

Skupmy się więc na sprawach istotnych. WWW jak zapewne wiele osób już wie to skrót od słów World Wide Web. Opiera się on na hipertekście. Czytając książkę musimy ją czytać linia po linii, ewentualnie ręcznie przekładać strony aby dotrzeć do interesującej nas informacji.  Idea hipertekstu polega na tym, iż możemy przeskakiwać do dowolnego miejsca tekstu w sposób natychmiastowy. Możemy także w taki sam sposób przeskakiwać między książkami (witrynami internetowymi). Załóżmy że książki takie są w bibliotece (grupa kilkunastu witryn  np. w danym państwie). Hipertekst umożliwia przeskakiwanie między tekstami zawartymi w różnych książkach różnych bibliotek. Słowem jest to ogromny zbiór wzajemnie ze sobą połączonych na różne sposoby stron. To jest właśnie to co sprawia ze przeglądanie Internetu jest takie przyjemne. Dowolne informacje dostępne  dla każdego. A przecież Internet to zbiór praktycznie nieograniczony.

Jak jednak to wszystko działa?

    Strony internetowe to nic innego jak zbiór plików zapisanych na dysku innego komputera. To wszystko. Pliki te oczywiście muszą spełniać  odpowiednie wymagania aby można było mieć do nich dostęp. Jednak Zasadniczo jednak nam wystarczy wiadomość że do odczytywania tych plików posługujemy się przeglądarką. A skąd one się tam biorą? Jak je tam wysłać? Otóż wszystkie witryny i zbiory internetowe  są gromadzone na serwerach. Serwer to po prostu mocny komputer (choć to zależy do jakich celów jest stosowany) wyposażony w szybkie łącze internetowe. Jest on podłączony do Internetu 24 godziny na dobę co umożliwia przeglądanie jego zasobów o dowolnej porze. Każda większa firma czy też portal internetowy posiadają swój własny serwer, który udostępnia jej pliki i strony internautom. Właściwie to każdy komputer podłączony do Internetu może pełnić role serwera. Wystarczy że będzie miał szybkie  łącze z Internetem i odpowiednie oprogramowanie. Jednak w praktyce takie rozwiązania nie są zbyt popularne z prostego powodu –  jest to mało opłacalne. Dlatego powstało całe mnóstwo firm które oferują tzw. Hosting, czyli udostępnianie określonego miejsca na serwerze danej firmy dla potrzeb  internautów. Zazwyczaj mniejsze konta (miejsce rzędu od 10 MB wzwyż) są darmowe i każdy może je posiadać o ile wcześniej się zarejestruje. Takie konta mają zazwyczaj ograniczenia i wyświetlają czasem reklamy ale  dla witryn domowych są w sam raz. Dla tych bardziej wymagających dostępne są hostingi płatne. Ceny są różne ale wahają się w granicach 100 zł za rok. Za tą cenę otrzymujemy już dużo więcej miejsca na stronę a także obsługę PHP i MySQL ( o czym za chwilę).

Języki programowania stron internetowych

    Witryny internetowe budowane są na podstawie różnych technik i języków programowania. Podstawą zawsze był i jest język HTML. To on opisuje całość witryny i odpowiada za jej strukturę. Jednak witryny zbudowane w oparciu o ten język są statyczne. Wczytujemy stronę i pozostaje ona praktycznie niezmieniona dopóki nie klikniemy na hiperłącze. Kiedyś gdy szybkość Internetu była ograniczona (szczególnie w Polsce) takie witryny miały jednak swoją zaletę. Wczytywały się bardzo szybko. Jednak dziś to już nie wystarcza.  Dlatego dość często jako dodatek używa się JavaScript. Skrypty w tym języku które wzbogacają witryne o różnego rodzaju efekty jak zmiana wyglądu obrazka po najechaniu na niego myszką, liczniki gości i wiele innych. Oprócz tego stosuje się pliki CSS które odpowiadają za wygląd strony i pozwalają na łatwą modyfikację.  W ostatnich czasach coraz głośniej o  XTML następcy HTML. Jednak jest on na razie rzadko używany i nie będziemy się nim póki co zajmować. Wszystkie języki które wymieniłem są używane w większości dzisiejszych  witryn internetowych. Jednak jak już wspomniałem za ich pomocą nie zbudujemy bardziej zaawansowanych stron które obsługują takie sprawy jak rejestrowanie i logowanie użytkowników, system komentarzy, różnego rodzaju obliczenia, sklepy internetowe oraz wiele innych bez których dzisiejszy Internet nie mógł by się obyć.  Do budowy witryn tego typu trzeba zastosować o wiele bardziej skomplikowane techniki i języki takie jak PHP, ASP w połączeniu z bazami danych (MySQL). Dopiero taki zestaw pozwala na praktycznie nieograniczone możliwości pryz projektowaniu i tworzeniu stron internetowych (strona którą oglądacie powstała właśnie na podstawie połączenia praktycznie wszystkich technik wymienionych powyżej).

Po tym moim wywodzie niektórzy mogą lekko się podłamać. Jednak w praktyce nie trzeba znać wszystkich tych języków i technik by stworzyć stronę internetową. W praktyce wystarczy znajomość samego HTML-a by zbudować już ładnie wyglądającą stronę. Z czasem można  zagłębiać się w inne języki i nabywać nowych umiejętności. Dlatego w tym kursie zaczniemy właśnie od HTML (co jest o tyle ważne iż bez niego nie zrobimy niczego innego. Skrypty i  języki typu  php muszą korzystać z HTML by prawidłowo funkcjonować.)A w przyszłości przyjrzymy się bliżej innym językom i technikom tworzenia stron internetowych.

Póki co nie będą nam potrzebne żadne dodatkowe programy aby zacząć uczyć się HTML-a. Także miejsce na serwerze na razie nie będzie potrzebne gdyż strony będziemy testować na własnym komputerze. W trakcie kursu założymy konto w jednej z popularnych firm hostingowych i tam będziemy stawiać naszą witrynę internetową. Przy nauce jakiegokolwiek języka tworzenia stron internetowych niewątpliwie przyda się znajomość języka angielskiego (podstawowa), jako że większość poleceń i funkcji jest w tym właśnie języku. Nie jest to jednak niezbędne J. Jednak po kolei…

Wprowadzenie do HTML-a

Przed przystąpieniem do właściwego tworzenia stron WWW musimy zwrócić uwagę na pewną bardzo istotną sprawę. Otóż dowiedzieć się czym właściwie jest HTML, co można zrobić za jego pomocą i, co ważniejsze, czego zrobić nie można 🙂

HTML (ang. HyperText Markup Language) powstał on w oparciu o język SGML (ang. Standard Generalized Markup Language), który jest poważnym systemem tworzenia dokumentów. Tworząc nasze strony WWW, nie musimy nic wiedzieć o SGML-u, ale pomocna może się okazać znajomość istotnej cechy twego języka mianowicie to iż opisuje on tylko strukturę strony a nie wygląd konkretnych jej elementów. Z początku koncepcja ta może być dość trudna zważywszy na to iż na co dzień używamy edytorów tekstu typu WYSIWYG (ang. What You See Is What You Get). Dlatego przez chwilę pomówmy dokładniej o tej koncepcji:

HTML odziedziczył po swoim przodku, języku SGML, jego najistotniejszą cechę, jest językiem opisu strony a nie wyglądu poszczególnych jej elementów. Idea ta polega na tym, że większość dokumentów jakie tworzymy  posiada pewne cechy wspólne, takie jak nagłówki, akapity czy listy. Stąd też już przed rozpoczęciem pisania możemy określić jakiego typu elementy będą nam potrzebne i nadać im odpowiednie nazwy.

W HTML-u zdefiniowany jest pewien określony zestaw stylów, używanych na stronach WWW: nagłówki, akapity, listy i tabele. Zostały też zdefiniowane również pewne elementy formatowania znaków, jak, na przykład, pogrubienie czcionki, pochylenie. Każdy z tych elementów posiada swoją nazwę (najczęściej skrót lub pierwsza litera od angielskich nazw tych elementów) i występuje jako tzw. Znacznik (o którym za chwile powiem więcej). Tworząc stronę WWW, nadajemy różnym elementom strony etykiety które mówią niejako że to jest element nagłówka, ten zaś jest elementem listy jeszcze inny to tabela.

Style które używamy np. w edytorach tekstu nie są tylko nazwami, przypisanymi do poszczególnych elementów strony ale zawierają oprócz tego informacje o formatowaniu tych elementów, takie jak rozmiar i styl użytej czcionki, wcięcia, podkreślenia itp. Jeżeli więc napiszemy jakiś tekst, który powinien być nagłówkiem, używamy stylu Nagłówek, a odpowiednim formatowaniem zajmuje się już sam program.

HTML nie posuwa się jednak tak daleko. Nie mówi nic na temat tego, jak powinna wyglądać strona, kiedy znajdzie się na ekranie. Znacznik HTML wskazuje tylko, że dany element to nagłówek bądź lista, ale w żaden sposób nie określa, jak ten nagłówek czy lista ma być sformatowana. Tym zajmują się tak zwane kaskadowe arkusze stylów (CSS) które bądź to za pomocą odpowiednich  instrukcji wewnątrz znaczników HTML , bądź też oddzielnych plików opisują wygląd i formatowanie strony.

Jeśli cały powyższy tekst wydaje się na razie mało zrozumiały to nie ma się czym przejmować. Wkrótce wszystko stanie się jasne gdy zaczniemy korzystać z tego w praktyce. Póki co wystarczy zapamiętać iż HTML określa poszczególne elementy strony a CSS zajmuje się ich formatowaniem.

Oglądanie HTML 🙂

Przeglądarki WWW, oprócz funkcji pobierania stron z sieci, wykonują także całą pracę związaną z formatowaniem tekstu HTML. Każda przeglądarka, nieważne czy będzie to InternetExplorer, Fierefox czy Opera po pobraniu pliku z sieci odczytuje (przetwarza) znaczniki HTML, a następnie formatuje tekst i elementy graficzne oraz wyświetla je na ekranie.

Jednak różne wersje przeglądarek czasem odmiennie interpretują różne znaczniki co jest dość dużym problemem dla tworzących strony. Trzeba zrobić je tak aby wyglądały tak samo na możliwie największe liczbie przeglądarek. My jednak jak na razie nie musimy się tym martwić gdyż podstawowe znaczniki HTML są interpretowane przez większość przeglądarek jednakowo.

Znaczniki i znaczniki, a co to właściwie jest? Otóż HTML jest językiem znaczników. Pisanie w tego typu języku oznacza tyle, że praca rozpoczyna się od napisania tekstu, do którego następnie dodawane są specjalne znaczniki, umieszczane wokół słów, zdań i akapitów. Znaczniki te określają różne elementy strony i dają różny efekt. W języku HTML został zdefiniowany pewien zestaw znaczników, z których możemy korzystać. Nie możemy jednak sami tworzyć nowych znaczników. Wszystko to komplikuje  na dodatek to iż każdy znacznik jest Rózie odczytywany przez różne przeglądarki. Zależy to od tego w jakiej wersji HTML został on zaimplementowany. Tych wersji już trochę było (od HTML 2.0  do HTML 4.01) jednak jak już wspomniałem nie jest to w tej chwili  tak bardzo istotne i  będziemy o tym mówić już w konkretnych sytuacjach.

 Strony, stworzone w HTML-u to zwykłe pliki tekstowe , co oznacza, że nie zawierają one żadnych informacji właściwych dla konkretnej platformy systemowej czy programowej. Mogą być odczytywane praktycznie przez każdy edytor tekstów (co w praktyce oznacza, że mogą je odczytywać wszystkie edytory tekstów od notatnika po Worda).

Plik HTML zawiera następujące elementy:

  •   Tekst właściwy strony
  •   znaczniki HTML, określające elementy strony, jej strukturę, sposoby formatowania hiperłącza i inne informacje

 Większość znaczników ma następującą postać:

 <Znacznik>tekst</Znacznik>

Nazwa znacznika (powyżej Znacznik) ujęta jest w nawiasy kątowe.

Każdy znacznik składa się zasadniczo z dwóch części: znacznika otwierającego i zamykającego, pomiędzy którymi zawarty jest tekst, którego dotyczą. Znacznik otwierający tak jakby „włącza” pewien sposób formatowania (nagłówek, pogrubienie itp.), a zamykający go „wyłącza”. Znacznik otwierający (na przykład, <p> dla początku akapitu) i znacznik zamykający (na przykład, </p> dla końca akapitu) tworzą tzw. element HTML.

Nie wszystkie znaczniki HTML mają swój początek i koniec. Niektóre z nich są pojedyncze, inne z kolei są jak gdyby pojemnikami  które  zawierają w sobie prócz nazwy znacznika wiele innych informacji. Jednak w XHTML-u 1.0 (następca HTML o którym wspominałem) wszystkie znaczniki muszą mieć koniec lub zakończenie.

Kolejna różnica pomiędzy HTML-em  oraz XHTML-em  polega na zapisywaniu znaczników oraz ich atrybutów małymi literami. Znaczniki HTML są niezależne od wielkości liter, to znaczy że możemy je zapisywać zarówno małymi jaki i dużymi ( a nawet i dużymi i małymi) literami a efekt działania danego znacznika będzie zawsze taki sam. Tak więc <html> oznacza dokładnie to samo co <HTML><hTmL>. W XHTML-u sprawy mają się zupełnie inaczej, gdyż w tym przypadku wszystkie znaczniki oraz atrybuty muszą być zapisywane małymi literami. Mimo ze kurs ten będzie o HTML to jednak przejście potem na xhtml będzie bardzo proste i przyjemne gdyż te dwa standardy nie różnią się między sobą za bardzo. Jednak aby w przyszłości było łatwiej zalecam stosowane we wszystkich znacznikach HTML małych liter mimo iż nie jest to wymagane.