|
Serwis Edukacyjny w I-LO w Tarnowie 
Materiały dla uczniów liceum |
Wyjście Spis treści Wstecz Dalej
Autor artykułu: mgr Jerzy Wałaszek |
©2026 mgr Jerzy Wałaszek
|
|
Serwis Edukacyjny w I-LO w Tarnowie
Materiały dla uczniów liceum |
Wyjście Spis treści Wstecz Dalej
Autor artykułu: mgr Jerzy Wałaszek |
©2026 mgr Jerzy Wałaszek
|
XAMPP jest pakietem kilku aplikacji, które znakomicie nadają się do nauki programowania stron oraz do ich testowania. Przejdź do strony:
i załaduj na swój komputer instalator:
Do katalogu Pobrane zostanie załadowany plik instalatora: xampp-windows-x64-8.2.4-0-VS16-installer.exe. Uruchom go. Instalacja jest bardzo prosta. Nie zmieniaj standardowych ustawień instalatora, klikaj przycisk Next (dalej):
 |
Instalacja XAMPP Witaj w instalatorze XAMPP. [< Wstecz] [Dalej >] [Przerwij]
|
 |
Wybierz Składniki ... Nic tu nie zmieniaj [< Wstecz] [Dalej >] [Przerwij] |
 |
Katalog instalacji ... Nic tu nie zmieniaj [< Wstecz] [Dalej >] [Przerwij] |
 |
Język ... Nic tu nie zmieniaj [< Wstecz] [Dalej >] [Przerwij] |
 |
Gotowość do instalacji Instalator jest teraz gotowy na rozpoczęcie instalacji XAMPP na twoim komputerze [< Wstecz] [Dalej >] [Przerwij] |
 |
Trwa instalacja, poczekaj do jej zakończenia.
[< Wstecz] [Dalej >] [Przerwij] |
 |
Kończenie pracy instalatora XAMPP Instalator
zakończył instalowanie XAMPP na twoim komputerze [< Wstecz] [Zakończ] [Przerwij] |
Może się jeszcze pojawić okienko zapory sieciowej Windows z pytaniem, czy udostępnić sieć dla serwera stron WWW Apache. Zatwierdź je.
Po zakończeniu instalacji zostaje uruchomiony panel sterowania:
Przypnij jego ikonę do paska zadań, aby zawsze był pod ręką:
Panel sterowania pozwala uruchamiać, zatrzymywać oraz konfigurować aplikację wchodzące w skład tego pakietu. Na początek sprawdzimy działanie serwera WWW Apache. W pierwszym wierszu kliknij przycisk Start. Jeśli serwer Apache się uruchomi, to jego nazwa zostanie podświetlona na zielono i przycisk Start zmieni się na Stop:
W oknie statusu u dołu panelu sterowania dostaniesz informację o bieżącym stanie pakietu. Teraz w przeglądarce WWW otwórz nową kartę i w pasku adresowym wpisz:
localhost
Nazwa localhost odnosi się do adresu internetowego twojego komputera. Jeśli wszystko jest w porządku, to dostaniesz stronę z informacjami o pakiecie XAMPP.
Uruchomiony serwer zatrzymujesz w panelu sterowania przyciskiem Stop. Zatrzymaj go i jeszcze raz wpisz w pasku adresowym localhost. Teraz żadna strona się nie załaduje i przeglądarka powinna cię poinformować o braku połączenia.
Do tworzenia stron WWW potrzebne jest odpowiednie oprogramowanie. Firma Microsoft udostępniła darmowo pakiet Expression Web 4. Pozwala on wygodnie tworzyć strony WWW oraz zarządzać nimi. Wadą jest tutaj brak słownika polskiego do poprawiania tekstu, jednakże nie przeszkadza to w nauce. Pakiet ten będziemy wykorzystywać wspólnie z XAMPP.
Najpierw pobieramy instalator z tego adresu:
Na twój komputer zostanie załadowany plik Web_Trial_en.exe. W nazwie jest słowo Trial (próbny), co sugeruje wersję próbną, jednakże jest to pełna wersja bez ograniczeń czasowych. Uruchom pobrany program.
 |
Okienko startowe instalatora |
 |
Zgoda na instalację. Kliknij Accept (zgoda). |
 |
Pytanie o przyłączenie się do programu Microsoft
dotyczącego poprawy doświadczeń użytkowników. Wybierz No (nie, bo ten program i tak już nie jest aktywny). Kliknij Next → (dalej). |
 |
Instalacja Nic tu nie zmieniaj. Kliknij Install. |
 |
Rozpoczyna się instalacja. Poczekaj na jej zakończenie. |
 |
Instalacja zakończona. Kliknij Finish. |
Najpierw na dysku przygotuj katalog, w którym będą powstawały projekty witryn. Ja taki katalog utworzyłem na dysku C i nazwałem wwwprj. Ty możesz wybrać swoją nazwę. Teraz uruchom Microsoft Expression Web 4. Gdy program się uruchomi, przypnij jego ikonę do paska zadań, aby była zawsze pod ręką.
Jeśli Expression Web było używane (np. przez inną grupę w pracowni), to może być już otwarta jakaś witryna. W takim przypadku należy ją zamknąć. Z menu wybierz opcję:
Site → Close
Teraz utworzymy swoją witrynę. Z menu wybierz opcję:
Site → New Site
Pojawi się okienko dialogowe kreatora witryny, w którym musimy podać kilka informacji:
Wybierz w polu środkowym Empty Site (pusta witryna), w polu Location (położenie) wpisz adres witryny na dysku, u mnie C:\wwwprj\w1 – katalog witryn na dysku C:\wwwprj oraz wewnętrzny katalog witryny w1. Pole Name (nazwa) jest automatycznie uzupełniane nazwą katalogu witryny. Gdy wszystko będzie gotowe, kliknij przycisk OK. Kreator utworzy w katalogu w1 witrynę. W oknie Expression Web pojawi się panel Site View (widok witryny), który jest na razie pusty, ponieważ nasza witryna nie zawiera jeszcze żadnego pliku (w rzeczywistości Expression Web umieszcza w katalogu witryny własne dane, które służą mu do zarządzania witryną i nie są widoczne w panelu).
Panel widoku witryny pełni wiele różnych funkcji. Utwórzmy teraz stronę startową WWW. Strona startowa jest stroną WWW, którą serwer WWW przesyła do klienta WWW, gdy klient zaadresuje witrynę. Gdy powstawały pierwsze witryny WWW w Internecie, strona startowa zawierała spis stron zawartych w witrynie WWW, dlatego zwykle posiadała nazwę index (spis). Będziemy się trzymać tej umowy, zatem utworzymy plik o nazwie index.html. Rozszerzenie html (lub niekiedy htm) oznacza plik strony w języku HTML (o tym za chwilę).
Z menu wybierz opcję:
File → New → Page...
Pojawi się okienko dialogowe kreatora nowej strony:
W pierwszym polu wybierz rodzaj stron (General = ogólne). W środkowym polu wybierz typ pliku (HTML - strona WWW w języku HTML). Kliknij przycisk OK. Kreator utworzy plik strony i zostanie ona wstawiona do panelu, który teraz zmieni się w edytor:
Zauważ, iż strona ma nazwę Untitled_1.html. Na spodzie edytora znajdują się trzy przyciski:
Teraz odpowiednio sformatujemy stronę.
Kliknij w przycisk Design. Następnie wskaż kursorem białe tło strony i kliknij je prawym przyciskiem myszki. Otworzy się menu kontekstowe związane ze stroną, którą kliknąłeś. Z menu wybierz opcję:
Page Properties...
Otworzy się okienko dialogowe:
Na zakładce General wpisz tytuł strony do pola Title. Tytuł ten pojawi się na zakładce strony w przeglądarce. Staraj się, aby tytuł był raczej krótki. Pozostałe pola możesz zostawić puste.
Kliknij w zakładkę Formatting.
Wybierz kolor tła strony (Background) oraz kolor tekstu (Text), jeśli mają być inne od standardowych. Pozostałych kolorów na razie nie zmieniaj. Kolory tła i tekstu powinny być kontrastowe, inaczej utrudnisz użytkownikowi czytanie treści strony.
Kliknij w zakładkę Language (język).
Na liście rozwijanej Page language (język strony) wybierz Polish (polski: szybko przejdziesz do tej opcji wybierając to pole i wpisując dwie pierwsze literki – po).
Na liście Save the document as: (zapisz ten dokument jako) wybierz kodowanie Unicode (UTF-8) (jeśli jest tam coś innego).
Gdy to zrobisz, zatwierdź okienko, klikając w OK.
Strona powinna odpowiednio zmienić swój kolor tła. Kliknij przycisk Code. Kod HTML strony uwzględnia wprowadzone zmiany:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="pl" http-equiv="Content-Language" /> <title>Moja pierwsza strona WWW</title> <meta content="informatyka, matura, liceum, strony WWW" name="keywords" /> <meta content="To jest pierwsza witryna ćwiczeniowa utworzona w Microsoft Expression Web 4" name="description" /> </head> <body style="color: #993300; background-color: #CCFFFF"> </body> </html> |
Zauważ, iż tworzenie strony przy pomocy Expression Web 4 nie wymaga programowania bezpośrednio w języku HTML, jednakże znajomość tego języka jest pożądana w przypadku, gdy chcemy wprowadzić coś, czego Expression Web nie obsługuje. Praca w trybie Design jest zalecana, ponieważ od razu widzimy wygląd (przybliżony) tworzonej strony.
Strona została utworzona. Zapiszemy ją teraz w naszej witrynie. Z menu wybierz opcję:
File → Save
lub naciśnij klawisze Ctrl + S. Ponieważ jest to pierwszy zapis do witryny, zostanie wyświetlone okno dialogowe zapisu pliku:
W polu File name (nazwa pliku) wpisz: index i kliknij przycisk Save (zapisz). Twoja strona zostanie zapisana w katalogu witryny (katalog ten jest automatycznie wybrany).
Gdy wrócisz do edytora na zakładce u góry pojawi się nazwa pliku index.html. Kliknij zakładkę Site view.
Zobaczysz na niej swój plik wraz z różnymi informacjami na jego temat:
Name: nazwa pliku Title: tytuł strony Size: przybliżony rozmiar strony Type: typ pliku, html: strona WWW w języku HTML Modified Date: czas modyfikacji Modified by: kto zmodyfikował
Kontynuujemy dalej tworzenie strony. Wróć do zakładki index.html i wybierz tryb Design. Z menu wybierz opcję:
Insert → HTML → Paragraf
Do kodu strony zostanie wstawiony znacznik akapitu (<p></p>) i kursor będzie ustawiony wewnątrz tego akapitu.
W edytorze pokazana jest ramka z literką p u góry po lewej stronie. To taka pomoc wizualna. Literka p oznacza znacznik <p>, czyli znacznik akapitu. Jest to znacznik blokowy, a zatem składa się ze znacznika rozpoczynającego blok <p> i znacznika kończącego blok </p>. Treść akapitu jest umieszczana pomiędzy tymi znacznikami.
Dodatkowo u góry okna edytor wyświetla ciąg znaczników HTML, wewnątrz których znajduje się kursor. Czytamy to tak:
<body> : znacznik obejmujący całą stronę
<p> : znacznik akapitu wewnątrz <body>, w którym aktualnie znajduje się kursor.
Jeśli przełączysz się teraz do trybu Code, to zobaczysz kod strony:
Zwróć uwagę na pozycję kursora. Zmiana trybu zawsze ją zachowuje.
Wróć do trybu Design. Wpisz tekst: Mój zwierzak domowy:
Zmienimy teraz znacznik akapitu na znacznik nagłówka. Sprawdź, czy u góry
edytora jest wybrany znacznik <p>. Dla pewności kliknij go lewym przyciskiem
myszki. Pod paskiem menu masz różne narzędzia edycyjne. Wyszukaj białe pole z
napisem Paragraph i strzałką w dół. Kliknij strzałkę i z rozwiniętej
listy wybierz
Nagłówki pisane są pogrubioną czcionką i większymi literami niż tekst akapitu. Zwróć uwagę, iż u góry masz teraz znaczniki <body> i <h1>. Przejdź do trybu Code. Kod strony wygląda następująco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="pl" http-equiv="Content-Language" />
<title>Moja pierwsza strona WWW</title>
<meta content="informatyka, matura, liceum, strony WWW" name="keywords" />
<meta content="To jest pierwsza witryna ćwiczeniowa utworzona w Microsoft Expression Web 4" name="description" />
</head>
<body style="color: #993300; background-color: #CCFFFF">
<h1>Mój zwierzak domowy</h1>
</body>
</html>
|
Wróć do trybu Design i wybierz nagłówek (kliknij w <h1> u góry edytora). Na pasku narzędziowym pod menu masz ikonki pozycjonowania tekstu w poziomie, takie jak w procesorze tekstu. Kliknij w ikonkę wyśrodkowania (lub naciśnij Ctrl + E). Tekst nagłówka powinien zostać wyśrodkowany:
Kliknij pod nagłówkiem i z menu wybierz opcję:
Insert → HTML → Paragraf
Pod nagłówkiem pojawi się nowy akapit:
Skopiuj do schowka poniższy tekst:
Chomik dżungarski to bardzo mały zwierzak, sympatyczny i towarzyski (w klatce może mieszkać kilka osobników). Mierzy ok. 9 cm, a jego waga to 30-40 g. Ma kolor jasnopopielaty, a na grzbiecie ciemniejszą pręgę. Nie polecany dzieciom, ponieważ ze względu na nieduże rozmiary wymaga delikatnego traktowania i ostrożności. Chomik dżungarski żyje do dwóch lat.
Kliknij wnętrze obszaru akapitu i wciśnij klawisze Ctrl + V. W akapicie pojawi się nasz tekst:
Zapisz stronę (menu: File → Save lub Ctrl + S).
Plik strony możesz zobaczyć w przeglądarce WWW (np. w Firefox). Na pasku narzędziowym u góry pod menu kliknij ikonę podglądu:
To wszystko na pierwszy raz, witryna jest utworzona. Temat tworzenia stron WWW jest bardzo obszerny, dlatego polecamy przerobienie jakiegoś dobrego kursu. Znajdziesz takie na YouTube, np:
Tutaj zajmujemy się tylko powierzchownie tym zagadnieniem z braku czasu.
Utworzyłeś witrynę WWW. Co dalej? Musisz ją teraz przesłać na serwer WWW. Co to znaczy? Serwer WWW posiada na dysku twojego komputera katalog roboczy. W przypadku XAMPP jest to katalog (o ile nie wybrałeś innej lokalizacji w trakcie instalacji pakietu XAMPP):
C:\xamp
Wewnątrz tego katalogu znajduje się podkatalog o nazwie:
htdocs
W tym właśnie katalogu znajduje się witryna, którą standardowo (o ile nie zmieniłeś konfiguracji) udostępnia serwer Apache.
Dobrym pomysłem przed dalszymi działaniami będzie skopiowanie tego katalogu w jakieś bezpieczne miejsce na dysku. Można to zrobić za pomocą Windows Explorera. Uruchom panel sterowania XAMPP. Po prawej stronie masz różne narzędzia systemu. Jest tam przycisk Explorer:
Kliknij ten przycisk. Zostanie uruchomiony Explorer z już wybranym katalogiem xampp.
Kliknij prawym przyciskiem myszki katalog htdocs i z menu kontekstowego wybierz opcję Kopiuj. Katalog htdocs zostanie skopiowany do schowka Windows.
Teraz u góry na ścieżce dostępu kliknij w Dysk lokalny (C:). Wyszukaj i otwórz katalog wwwprj, który utworzyliśmy dla witryn WWW. Wewnątrz powinien być katalog w1 z naszą ostatnią witryną. Wskaż puste miejsce poniżej w1 i kliknij w nie prawym przyciskiem myszki. Z manu kontekstowego wybierz opcję Wklej. Explorer skopiuje katalog htdocs do naszego katalogu z witrynami. W ten sposób będziemy mogli go zawsze odtworzyć z tej kopii.
Teraz otwórz katalog w1. Wewnątrz powinieneś zobaczyć cztery obiekty:
Trzy pierwsze (katalogi _vti_cnf, _vti_pvt oraz plik desktop.ini) zostały utworzone przez Expression Web i przechowują różne informacje potrzebne do zarządzania twoją witryną. Serwerowi Apache nie będą one potrzebne. Istotny jest tylko plik strony WWWW index.html. Aby jednak nie grzebać się w szczegółach, skopiujemy wszystko. Wciśnij klawisze Ctrl + A (zaznaczenie wszystkiego, A = All - wszystko). Teraz wciśnij Ctrl + C. Zaznaczone obiekty zostaną skopiowane do schowka.
Wracamy do katalogu xampp. Kliknij w strzałkę w lewo (u góry po lewej stronie okna Explorera) tyle razy, aż wrócisz do katalogu c:\xamp. Następnie otwórz katalog htdocs.
Ponownie zaznacz wszystko za pomocą Ctrl + A. Następnie wciśnij klawisz Del. Zawartość katalogu htdocs zostanie usunięta. Teraz wklejamy ze schowka Windows naszą witrynę (Ctrl + V).
Możesz już zamknąć Explorer. Wróć do panelu sterowania XAMPP i uruchom przyciskiem Start serwer Apache (powinien zostać podświetlony na zielono). W przeglądarce internetowej wpisz w pasku adresu:
localhost
Jest to adres komputera lokalnego, czyli tego, na którym pracujesz. Powinieneś zobaczyć stronę o chomiku dżungarskim. Jeśli tak jest, to gratulacje, przesłałeś witrynę na serwer.
Gdy pracuje serwer WWW, to wszystkie komputery w twojej sieci mają dostęp do witryny umieszczonej w htdocs. Sprawdź adres IP swojego komputera (polecenie ipconfig w terminalu), a następnie wpisz ten adres w pasku adresowym przeglądarki na innym komputerze (musi być w tej samej sieci). Powinna się wyświetlić strona o chomiku. Jeśli twój adres IP jest adresem publicznym, to każdy komputer w Internecie może teraz wyświetlić udostępnianą stronę WWW.
Jeśli serwer WWW pracuje na innym komputerze niż jest tworzona witryna (tak jest najczęściej), to do przesyłania plików wykorzystujemy serwer FTP. Pakiet XAMPP zawiera taki serwer o nazwie FileZilla. Przed użyciem serwera FTP musimy go odpowiednio skonfigurować. Uruchom panel sterujący XAMPP.
W trzecim wierszu masz serwer FileZilla. Uruchom go przyciskiem Start. Jeśli nie będzie problemów, to FileZilla otrzyma zielone tło (być może system Windows wyświetli okienko zgody na udostępnienie aplikacji FileZilla dostępu do sieci – wyraź zgodę).
Gdy serwer FTP będzie działał, kliknij w przycisk Admin. Zostanie wyświetlone okienko dialogowe połączenia z serwerem:
W oknie mamy adres IP serwera: 127.0.0.1. To adres lokalny twojego komputera (to samo znaczenie ma localhost). Port określa kanał dostępu wykorzystywany do administracji serwerem. Pod tym samym adresem IP może być wiele usług sieciowych. Dostęp do nich wymaga osobnych portów, które są jakby bramami kontaktu z usługą. Port 14147 wybrany jest do zarządzania serwerem Filezilla. Nic nie zmieniaj, kliknij w przycisk OK. Otworzy się panel administracyjny serwera FileZilla.
Założymy teraz konto użytkownika, którym będziemy się logować na serwer. Pod menu masz kilka ikon narzędzi. Wskaż myszką i kliknij w ikonę użytkownika:
Otworzy się okienko dialogowe użytkowników (ang. Users):
Po prawej stronie kliknij przycisk Add (dodanie nowego użytkownika). Zostanie wyświetlone okienko dodawania konta użytkownika:
W polu tekstowym wpisz nazwę konta. Ja wybrałem u. Nie twórz zbyt skomplikowanych nazw, jeśli serwer ma być tylko do twojego użytku. Nazwę konta zatwierdź przyciskiem OK. Powrócisz do okna użytkowników. Nie zmieniaj tam nic (na to przyjdzie czas później, gdy oswoisz się z serwerem). W polu Page (strona) wybierz Shared folders (współdzielone katalogi). Są to katalogi na komputerze, na którym pracuje serwer, udostępnione użytkownikowi konta.
Pod polem Shared folders kliknij przycisk Add. Pojawi się okienko wyboru katalogu, który zostanie dodany do konta użytkownika u.
Wyszukaj na liście katalog htdocs. Rozwiń kolejno: Ten komputer, Dysk lokalny (C:), xampp. Zaznacz htdocs.
Kliknij w przycisk OK.
Wybrany katalog pojawi się w polu Shared folders. Litera H przed ścieżką dostępu oznacza, iż wybrany katalog stanie się katalogiem domowym dla użytkownika na serwerze (ang. home directory). Dla tego katalogu zaznacz wszystkie opcje pod Files (pliki) i Directories (katalogi). W ten sposób użytkownik uzyska pełną kontrolę nad zawartością katalogu. Ponieważ użytkownikiem będziesz ty sam, to takie rozwiązanie jest do przyjęcia. Gdyby serwer działał w sieci publicznej, to należałoby dokładnie się zastanowić na co pozwolić użytkownikowi, a co mu zabronić.
Gdy to wszystko zrobisz, kliknij przycisk OK. Konto jest zdefiniowane i gotowe do użytku.
Teraz zajmiemy się przesłaniem plików naszej witryny. Wróć do panelu sterowania XAMPP i kliknij przycisk Explorer. Eksplorator plików Windows pozwala łączyć się z serwerami FTP.
W pasku adresowym u góry okna okna Eksploratora wpisz:
ftp://(adres IP serwera FTP)
|
: Jeśli pracujesz na innym komputerze niż serwer |
ftp://(adres IP twojego komputera)
|
: Jeśli pracujesz na tym samym komputerze co serwer FTP |
ftp://127.0.0.1 |
|
ftp://localhost |
Naciśnij Enter. Jeśli wszystko działa należycie, to Eksplorator połączy się z serwerem FTP i pojawi się okno logowania:
Wpisz swoją nazwę użytkownika (u mnie u). Pole Hasło pozostaw puste, chyba że tworząc konto zdefiniowałeś sobie hasło. Kliknij przycisk Zaloguj. W eksploratorze uzyskasz dostęp do katalogu htdocs serwera Apache.
Dalsze postępowanie niczym nie różni się od tego, które opisaliśmy w poprzednim rozdziale.
 |
Zespół Przedmiotowy Chemii-Fizyki-Informatyki w I Liceum Ogólnokształcącym im. Kazimierza Brodzińskiego w Tarnowie ul. Piłsudskiego 4 ©2026 mgr Jerzy Wałaszek |
Materiały tylko do użytku dydaktycznego. Ich kopiowanie i powielanie jest dozwolone pod warunkiem podania źródła oraz niepobierania za to pieniędzy.
Pytania proszę przesyłać na adres email:
Serwis wykorzystuje pliki cookies. Jeśli nie chcesz ich otrzymywać, zablokuj je w swojej przeglądarce.
Informacje dodatkowe.
