DARMOWA LEKCJA KURSU

Transkrypt

1 DARMOWA LEKCJA KURSU Zaistniej w Internecie Witam! Chciałbym przedstawić Ci darmową lekcję kursu Zaprogramuj sukces, na której opowiem trochę o wyglądzie dokumentów HTML oraz o języku CSS, który jest praktycznie jego nieodłącznym elementem. Opiszę także instalację takich programów jak: XAMPP - darmowy pakiet, składający się głównie z serwera Apache, bazy danych MySQL i interpreterów dla skryptów napisanych w PHP, czyli ogólnie mówiąc jest on potrzebny aby odczytywać pliki PHP na Twoim komputerze ;) Notepad++ - darmowy edytor tekstu, który zawiera niezbędne funkcje do przyjemniejszego i łatwiejszego programowania(jak np. kolorowanie składni) Lekcja ta jest w pełni darmowa i możesz ją rozpowszechniać pod warunkiem, że pozostawisz ją w niezmienionej formie. Czas Na Konkrety WYGLĄD DOKUMENTU HTML Zanim przejdziemy do języka PHP musisz dowiedzieć się jak wygląda szablon strony HTML, gdyż język PHP będzie zawsze umieszczany właśnie w tym szablonie. Jak widad na zdjęciu 3 główne ramy dokumentu HTML to: <html></html> <head></head> <body></body>

2 Pierwsza linijka skryptu daje informacje przeglądarce, jakiego typu jest nasz dokument, tzn. w jakim języku została napisana strona. Istnieją 3 formy doctype dla języka HTML jednak nie będę ich wymieniał teraz, ponieważ nie jest to niezbędne dla Ciebie w tym momencie, lecz jeśli ktoś jest ciekaw to zapraszam do zapoznania się z tą stroną: Po ustaleniu typu dokumentu otwieramy znacznik <html>, a zaraz po nim <head> co po angielsku oznacza głowa. Pomiędzy znacznikami <head></head> będą zawarte takie informacje jak: linijka 5. - określa w jaki sposób odbywad się będzie kodowanie znaków na naszej stronie(można użyd kodowania UTF-8 lub iso gdyż oba są prawidłowe dla języka polskiego) linijka 6. - Zawiera krótki opis naszej strony WWW, który wyświetlać się będzie w wyszukiwarkach pod linkiem do naszej strony. Jeśli nie podamy tego atrybutu, wyszukiwarka wyświetli kilka pierwszych linijek tekstu z naszej strony. Warto ustawić jakiś krótki i zachęcający opis gdyż może się to przyczynić do tego, że ludzie chętniej wejdą na naszą stronę. Linijka 7. - Tutaj podajemy słowa kluczowe oddzielone przecinkami. Służy to odnalezieniu Twojej strony przez wyszukiwarkę po wpisaniu do niej tych słów. Jest to bardzo ważny element i należy podać słowa jak najlepiej oddające treść strony. Najlepiej jeśli każda podstrona będzie miała własne słowa kluczowe, gdyż znacznie zwiększy to szanse na częstsze wyświetlanie się strony podczas poszukiwać przez potencjalnych klientów. Linijka - 8. Jest to informacja dla przeglądarki, gdzie znajduje się arkusz stylów.css(bliżej o tym za chwilę) i jest to również nieodłączny element profesjonalnych serwisów. Linijka 9. - W tym miejscu nadajemy tytuł naszej strony który wyświetlać się będzie w belce tytułowej przeglądarki a także podczas wyszukiwać strony i właśnie dlatego powinien on być w miarę krótki(kilka wyrazów) i zachęcający. Między znacznikami <body></body> będzie zawarta praktycznie cała treść naszej strony, czyli wszystkie skrypty PHP, JavaScript itp. Jest to ciało strony. Oto lista znaczników HTML których najczęściej będziemy używać(inne będą opisywane wraz ze skryptami): - pogrubienie tekstu - akapit - pochylenie tekstu - podkreślenie tekstu - przejście do następnej linijki(jak ENTER w edytorze tekstu ;)) <center></center> - wyśrodkowanie treści pomiędzy znacznikami <img src="ścieżka dostępu do obrazka" alt="opis obrazka" /> - wstawienie obrazka <a href="adres internetowy">wyświetlana nazwa</a> - wstawienie linku Ok, to na tyle znaczników póki co. Teraz jeszcze wytłumaczę Ci istotę stosowania stylów, czyli arkuszy CSS o których była mowa kilka linijek wyżej.

3 Mianowicie CSS to specjalny język służący do formatowania elementów strony WWW. Nie może on sam istnied, ponieważ jest ściśle powiązany z językiem HTML. Część poleceń w języku CSS nie jest niestety obsługiwana w takim samym stopniu(bądź wcale nie jest obsługiwana) przez różne przeglądarki. Nie jeden programista ma z tym sporo kłopotów podczas formatowania wyglądu strony. Jednak to, że różne przeglądarki różnie go interpretują nie znaczy, że trzeba się go bać, ponieważ nie powoduje on błędów w przeglądarce i na stronie nie pojawi się milion błędów. Sposobem jaki zazwyczaj stosuję(i stosują go też duże serwisy takie jak np. serwis nk.pl) jest utworzenie osobnych stylów dla poszczególnych przeglądarek(więcej o tym dowiesz się na kursie!). Tak jak przeglądarki takie jak Opera, FireFox, Chrome czy też Safari interpretują CSS bardzo podobnie, tak (kochany) Internet Explorer ma swój świat. Dlatego nie zalecam stosowania tej przeglądarki do codziennego użytku ale zdaję sobie sprawę, że wiele ludzi z niej korzysta, a jeśli chcemy tworzyć profesjonalny serwis nie możemy Dobra informacja! Koniec suchej teorii Informacje zawarte powyżej zupełności wystarczą, aby rozpocząć budowanie profesjonalnej strony. Trochę dziwnie to wygląda prawda? Kilka skróconych opisów i masz pisać profesjonalne strony internetowe Gdy nie umiałem programować wydawało mi się to równie niemożliwe, jednak teraz wiem, że nie miałem racji i nie jest to wcale takie trudne. Z przyjemnością udowodnię Ci to na kursie i będziesz dziwić się jak mogło Cię to przerażać INSTALACJA XAMPP PHP w przeciwieństwie, do HTML wymaga instalacji programu takiego jak np. XAMPP, który utworzy na Twoim komputerze prywatny serwer obsługujący skrypty PHP. Pobrać ten program możesz z poniższego linku:

4 Teraz krok po kroku przeprowadzę Cię przez proces instalacji i konfiguracji! Po uruchomieniu pliku instalacyjnego ukaże Ci się takie okno w którym poprzez kliknięcie na przycisk Browse wybierzesz ścieżkę docelową dla instalacji. Zdecydowanie zalecam zainstalowanie bezpośrednio na dysku systemowym(przeważnie dysk C:\), ponieważ w tym kursie właśnie taką ścieżkę będę podawał w przykładach. Oczywiście jeśli ktoś bardzo chce może zainstalować w innym miejscu, nie ma problemu. Jeśli jednak decydujesz się na domyślną ścieżkę nic nie zmieniaj tylko kliknij przycisk Install.

5 Po instalacji ukaże Ci się takie okno. Program zapyta czy ma dodać skrót do menu programy w menu start i na pulpicie. Wpisz literę y co oznacza tak i wciśnij ENTER Następnie program zapyta czy umiejscowił pliki programu poprawnie i czy ma kontynuować. Znów wpisz y i wciśnij ENTER.

6 Wpisz n i znów ENTER. Dajemy w ten sposób informacje programowi żeby nie ustawiał tworzył przenośnych plików XAMPP. XAMPP jest gotowy do użytku! Wciśnij ENTER XAMPP XAMPP jest gotowy do użytku! Wciśnij ENTER

7 Program ustawił strefę czasową w pliku php.ini i my.ini dla Europy/Paryża. Strefa ta jest poprawna także dla Polski dlatego nie będzie potrzeby aby ją zmieniać. Wciśnij ENTER Zakończenie instalacji, wszystko jest już gotowe, więc wpisz x i wciśnij ENTER. Czarne okno zamknie się i teraz poprzez pomarańczowo białą ikonę na pulpicie otwórz program, a Twoim oczom ukaże się następujące okno.

8 W sekcji Modules zaznaczamy 2 okienka przy opcji Apache. Kliknij OK aby zainstalowad Apache.

9 To samo zrób dla MySQL Następnie kliknij na przyciski Start obok opcji Apache i MySql.

10 Tak powinien wyglądać program skonfigurowany do pracy. Wciskamy teraz przycisk Explore Otworzy się folder programu.

11 Program możemy zamknąć poprzez klikniecie na czerwony przycisk w prawym górnym rogu, a nasze okno schowa się do paska i obok godziny pokaże się jego ikona. Aby uprościć wygląd zamknij panel po lewej stronie i zmień wygląd na listę.

12 Wejdź następnie w folder htdocs. W folderze tym będziesz umieszczać wszystkie pliki Twojej strony. Póki co znajdują się tu pliki, które zostały stworzone podczas instalacji.

13 Otwórz teraz przeglądarkę i wpisz w pasku adresu localhost jak na screenie. Twoim oczom ukaże się taki widok, a pasek adresu zmieni trochę wygląd. Wyświetlane są teraz właśnie te pliki, które są w folderze htdocs.

14 Przejdź ponownie do folderu htdocs i usuń z niego wszystkie pliki. Po usunięciu plików i ponownym wpisaniu w przeglądarce localhost wygląd strony powinien być podobny do tego.

15 INSTALACJA NOTEPAD++ Skonfigurowaliśmy już serwer XAMPP i jest on gotowy aby umieszczać na nim pliki! No tak tylko gdzieś trzeba te pliki stworzyć ;) Moim ulubionym programem jest Notepad++ i właśnie ten program polecam Tobie przy pisaniu skryptów. Ma wszystkie potrzebne opcje i niczego w nim Ci nie zbraknie. Oto link, z którego można go pobrać: Poniżej zamieszczone obrazy przedstawią proces instalacji tego edytora tekstu. Ponieważ instalacja przebiega w języku polskim nie będę dokładnie opisywał każdego nich.

16

17

18 Po uruchomieniu programu, jeśli wyskoczy okno podobne do powyższego, kliknij na Update Selected, po czym program dokona aktualizacji która potrwa kilka sekund/minut. Po aktualizacji wyskoczy takie okno, w którym zostaniemy zapytani o to czy chcemy teraz restartować program aby wprowadzić zmiany. Klikamy tak i chwilę czekamy aż program uruchomi się ponownie.

19 Gratulacje! Teraz już wiesz jak wygląda szablon strony HTML, co powinniśmy zawrzeć w nim, aby strona była jak najlepiej odbierana przez wyszukiwarki internetowe. Wiesz także, jakie są podstawowe znaczniki HTML oraz co to jest CSS. Masz skonfigurowany program XAMPP gotowy do umieszczania w nim plików oraz dobry edytor tekstu! Doskonale zdaję sobie sprawę, że pewnie dla większości osób instalacja 2 programów, jaka miała tutaj miejsce jest prosta jednak niektórym może sprawiać problemy, dlatego opisałem ją tak dokładnie. Miałem też w tym inny, ważniejszy cel... Chciałem Ci uświadomić i pokazać jak będzie wyglądał kurs. Instalacja programu była łatwa ok, zgodzę się, ale jak będzie z np. pokazem slajdów, dynamiczną galerią czy też formularzem kontaktowym?:) Wtedy nie będziesz raczej narzekać na dużą ilość zdjęć i wyjaśnieć ;) Każdemu trudność sprawia, co innego, a moim celem jest jak najlepsze przekazanie wiedzy KAŻDEMU najlepiej jak potrafię. Nie chcę żeby ktokolwiek po ukończeniu kursu nie umiał tworzyć stron WWW, nie ma wręcz takiej możliwości ;) Chciałem Ci przez to także udowodnić, że to bardzo dobra inwestycja i ukończenie kursu z pewnością przyniesie Ci wiele korzyści. Lecz na razie nie myśl o tym, z jaką łatwością będziesz uczyć się tego wszystkiego i nie wyobrażaj sobie ile nowych możliwości otworzy przed Tobą posiadanie takich umiejętności.

20 Od Ciebie zależy czy chcesz samodzielnie tworzyć i administrować stronę www czy też zlecić to specjalistom odpłatnie tylko pytam dla czego jeżeli możesz sam. Pozdrawiam i do zobaczenia na kursie! : Osoby zainteresowane kursem proszę o napisanie na ryszardm@onrt.pl a zaczniemy kurs jak najszybciej nadmieniam iż jest sześć lekcji do przepracowania trochę materiału życzę powodzenia i szybkiej decyzji. Kontakt Skype: ryszard-magda Mój Blog