--- title: "Tutorial - Tworzenie strony WWW w OVHcloud" description: "Dowiedz się, jak utworzyć pierwszą stronę internetową na Darmowy hosting" url: https://docs.ovhcloud.com/pl/guides/web-cloud/web-hosting/create-your-personal-webpage lang: pl lastUpdated: 2026-06-08 --- # Tutorial - Tworzenie strony WWW w OVHcloud ## Wprowadzenie Dowiedz się, jak utworzyć pierwszą stronę internetową na darmowy hosting oferowanym bezpłatnie w przypadku zakupu domeny od OVHcloud. :::warning OVHcloud oddaje do Twojej dyspozycji usługi, których konfiguracja, zarządzanie i odpowiedzialność spoczywa na Ciebie. W związku z tym należy zapewnić ich prawidłowe funkcjonowanie. Oddajemy w Twojej ręce niniejszy przewodnik, którego celem jest pomoc w jak najlepszym wykonywaniu bieżących zadań. W przypadku trudności zalecamy skorzystanie z pomocy [wyspecjalizowanego usługodawcy](https://partner.ovhcloud.com/pl/directory/). Niestety firma OVHcloud nie będzie mogła udzielić wsparcia w tym zakresie. Więcej informacji znajduje się w sekcji [Sprawdź również](#go-further) niniejszego przewodnika. ::: ## Wymagania początkowe - Posiadanie [domeny](https://www.ovhcloud.com/pl/domains/) - Posiadanie [hostingu OVHcloud](https://www.ovhcloud.com/pl/web-hosting/) lub bezpłatnego [Darmowy hosting](https://www.ovhcloud.com/pl/domains/free-web-hosting/) - Posiadanie edytora tekstu (notebooka, TextEdit, Notepad++, itp.) - Instalacja klienta FTP (takiego jak [Cyberduck](https://cyberduck.io/), [FileZilla](https://filezilla-project.org/download.php), etc.) do pobrania (umieszczenie na hostingu) plików z serwera dedykowanego. ## Wprowadzenie ### Z czego jest zrobiona strona internetowa? Zawartość strony internetowej często składa się z kilku stron [www](http://www). Strona www wyświetla treści, zamrożone lub nie, które zostały opracowane do obsługi doświadczenia nawigacyjnego. Strony, które wyświetlasz w przeglądarce, są wynikiem trzech elementów, które szczegółowo omówimy: - **HTML (HyperText Markup Language)**: język używany do strukturyzacji stron. "Struktura" oznacza elementy i ich organizację.
**Przykład**: po tytule dokumentu następuje nagłówek i jeden lub więcej ustępów. Elementy używane do strukturyzacji zawartości są nazywane "znacznikami" i piszą się za pomocą otwartych i zamkniętych kropli. **Przykład** : Znacznik `

` to ta, która rozpoczyna paragraf, przy czym ten sam punkt jest zamknięty przez zamknięty tag `

` . :::warning W przypadku każdego otwartego znacznika należy utworzyć zamknięty tag. Znaki nie pokrywają się (zamykają się w odwrotnej kolejności ich otwarcia) i nie mogą być interpretowane inaczej niż za pomocą znaczników HTML. ::: Dostępnych jest ponad 100 tagów, ale niektóre z nich będą gotowe do użycia. - **CSS (Cascading Style Sheet, kaskadowe arkusze stylów)**: język opisujący sposób umiejscowienia, wymiarowania, zachowania, kolorowania lub wyświetlania elementów HTML. Reguły te mogą mieć zastosowanie do elementów ogólnych (ten sam kolor dla wszystkich tytułów strony, lub czcionka, która będzie używana do wszystkich tekstów) lub do określonych elementów (tekst zawarty w fotelu, zachowanie podczas przelotu menu nawigacyjnego). - **JavaScript**: język wzbogacający interakcje na stronie internetowej (lub aplikacji internetowej). Mimo, że jest to niezbędne dla programistów www, nie jest konieczne, aby utworzyć Twoją stronę [WWW](http://WWW).
Jeśli nie znasz kodu w różnych językach, możesz skopiować/wkleić przykłady kodu, które są zawarte w tym przewodniku, pozwolą Ci one na utworzenie strony WWW, która będzie mogła być użyta na Twoim hostingu. ### Jakie narzędzia? Aby utworzyć stronę www, zapisz w pliku kod źródłowy w jednym z trzech języków wymienionych powyżej. Oto ich główne nazwy rozszerzeń: _".html"_ (dla plików HTML), _".css"_ (dla plików CSS), _".js"_ (dla plików JavaScript). Pliki można zapisać w edytorach tekstu, w tym pliki, które są domyślnie dostępne w systemie operacyjnym (notatnik, TextEdit). Darmowe rozwiązania Open Source oferują wiele dodatkowych funkcji: [Notepad++](https://notepad-plus-plus.org/), [Brackets](https://brackets.io/), [Sublime Text](https://www.sublimetext.com/) lub [Micro](https://micro-editor.github.io/). Można również korzystać z IDE (Integrated Development Environment, zintegrowane środowisko rozwoju), takich jak [Visual Studio Code](https://code.visualstudio.com/) lub [Geany](https://www.geany.org/). Aby wyświetlać i dostosowywać strony przed umieszczeniem ich na hostingu, użyj przeglądarki internetowej. W tym celu otwórz plik z lokalnej lokalizacji bezpośrednio w przeglądarce. ### Strona **statyczna** czy **dynamiczna**? Strona jest **statyczna**, gdy strony wyświetlane w przeglądarce są zawsze takie same i nie oferują żadnych specjalnych interakcji innych niż efekty (np. menu rozwijane), animacje i filmy. Strona WWW, która **dynamicznie** się wyświetla zakłada, że przeglądane strony są generowane przez serwer www, który wykonuje kod, dostęp do bazy danych itp. Pozwala to na uzyskanie wyniku w zależności od zapytań użytkowników (przeglądanie stron, uwierzytelnianie, wysyłanie danych za pomocą formularza, przeglądanie zapasów lub spisów itp.). ### Czym jest język PHP? PHP (_PHP Hypertext Preprocessor_) to język używany głównie w rozwoju sieci. Działa on wyłącznie po stronie serwera, więc nie jest konieczne, aby zbudować elementy widoczne w przeglądarce. Przydatne do pobrania wiadomości, które zostaną wysłane za pomocą formularza kontaktowego na Twojej stronie [WWW](http://WWW). ## W praktyce Poniższe etapy pozwolą Ci stworzyć Twoją pierwszą stronę [www](http://www). ### Rozwiń zawartość swojej strony za pomocą kodu HTML Aby zbudować Twoją pierwszą stronę WWW, stwórz katalog gdziekolwiek na Twoim komputerze, w którym umieścisz wszystkie pliki. Nazwij pierwszy plik `index.html` i będzie zawierał kod HTML. Jest to pierwszy plik, który należy utworzyć, ponieważ serwery HTTP są skonfigurowane domyślnie, aby żądanie na Twoim hostingu (wpisując nazwę domeny na pasku adresowym przeglądarki) wyświetlało plik "index". Otwórz edytor tekstu i zapisz plik roboczy. :::info Zalecamy zachowanie kilku kopii tego katalogu roboczego w celu wykonania kopii zapasowych. Strona będzie dostępna na Twoim hostingu. Pamiętaj, aby zachować kopię lokalną oraz kopie zapasowe na innych nośnikach, takich jak zewnętrzne dyski twarde. ::: #### Tworzenie strony HTML typu Strony HTML są zawsze skonstruowane w taki sam sposób: - oświadczenie DOCTYPE, które wskazuje przeglądarce, aby odczytała następujące treści w sposób zgodny z maksymalnie standardami; - znacznik ``, który będzie obramować wszystkie inne znaczniki dokumentu; - znacznik ``, który zawiera informacje o kodowaniu strony i jej tytule; - znacznik ``, który będzie zawierał "ciało" twojej strony HTML. Możesz skopiować/wkleić ten kod do pliku `index.html`: ```html Moja strona osobista ``` Niektóre znaczniki zawierają więcej informacji niż inne, np. tag `` w powyższym przykładzie. W tym przypadku mamy na myśli atrybuty, które pozwolą określić niektóre elementy. W tym konkretnym przypadku chodzi o wskazanie, który język jest głównym językiem strony internetowej. Niektóre z tych atrybutów są uniwersalne i mogą być używane na wszystkich tagach (z pewnymi wyjątkami), inne są specyficzne. Znacznik `` zawiera elementy, które nie będą wyświetlane na ekranie. Znaki `` będą wskazywać przeglądarce, ale także wyszukiwarkom, np. kodowanie znaków używanych w dokumencie (UTF-8 w powyższym przykładzie) lub informacje o wyświetlaczu na telefonie komórkowym ("viewport" w powyższym przykładzie). Znaczący jest znacznik `` . Umożliwia ona określenie strony, która pojawi się na karcie przeglądarki, ale przede wszystkim będzie indeksowana przez wyszukiwarki. Tytuł ten pozwoli Ci na przykład wyświetlić się w wynikach wyszukiwania Google, DuckDuckGo, etc. Położenie najwyższego poziomu w wynikach to ćwiczenie zdefiniowane przez reguły SEO (_Search Engine Optimization_ ). W tym artykule nie będziemy o tym rozmawiać. Jeśli chodzi o tag `<body>`, będzie on zawierać inne znaczniki HTML, które mają mieć strukturę dokumentu. #### Uzupełnij tytułem, podtytułem i treścią Teraz edytujemy zawartość tekstową Twojej strony, zawsze zgodnie ze standardową strukturą HTML, aby dodać tytuł, podtytuł, akapity i listy tekstu. - **Znaki `<h1>` do `<h6>`** Papiery wartościowe pisane są między znacznikami `<h...>`, które są hierarchizowane jak na każdym dokumencie: najpierw `<h1>`, następnie `<h2>`, etc., ostatni to tag `<h6>`. Znacznik `<h1>` jest więc niezbędny, jeśli chcesz napisać tag `<h2>`. Jeśli jednak nie przestrzegasz tej reguły, przeglądarka wyświetli wynik bez błędów. ```html <body> <h1>Witamy na mojej stronie osobistej</h1> <h2>Szybkie i proste tworzenie strony WWW</h2> </body> ``` Możesz zobaczyć wynik, otwierając plik HTML za pomocą przeglądarki internetowej (Firefox, Chrome, Safari, itp.): oba ciągi znaków będą wyświetlane w różnych rozmiarach. - **Znacznik `<p>`** Znacznik ten jest używany do zapisywania tekstu ("p" do akapitu). Istnieje kilka opcji: ```html <body> <h1>Witamy na mojej stronie osobistej</h1> <h2>Szybkie i proste tworzenie strony WWW</h2> <p>OVHcloud oferuje darmowy hosting dla każdej zarejestrowanej domeny.</p> </body> ``` - **Znaki `<ul>` i `<li>`** W HTML możesz używać list. Weźmiemy przykład prostych list, tzw. nieuporządkowanych (takich jak te dostępne w edycji tekstu). Aby utworzyć listę, używamy tagu `<ul>` (_unordered list_). Ten znacznik będzie ramka inne elementy, znaczniki `<li>`, które będą zawierać zawartość Twoich list: ```html <body> <h1>Witamy na mojej stronie osobistej</h1> <h2>Szybkie i proste tworzenie strony WWW</h2> <p> <img src="images/logo-ovhcloud.png" alt="Logo OVHcloud"/> </p> <p>OVHcloud oferuje darmowy hosting dla każdej zarejestrowanej domeny.</p> <p>Oferta "Domena" zawiera:</p> <ul> <li>Hosting WWW 100 MB gratis</li> <li>Konto E-mail 5 GB za darmo</li> <li>DNSSEC: ochrona przed zatruciem cache (cache poisoning)</li> <li>Easy Redirect: dostęp do sieci społecznościowych z domeny</li> </ul> </body> ``` Możesz zobaczyć wynik w przeglądarce: domyślnie elementy list są wyświetlane chipami. #### Dodaj obrazy, aby Twoja strona była bardziej atrakcyjna Internet to przede wszystkim medium wizualne. W tej części zobaczymy, jak wstawić obrazy do treści. Oferta Darmowy hosting oferuje przestrzeń dyskową 100 MB. To wystarczy dla Twoich stron HTML i CSS, ale może być to ograniczone, jeśli chcesz umieścić dużo obrazów na swojej stronie. W tym przypadku zalecamy wybranie [oferty hostingu OVHcloud](https://www.ovhcloud.com/pl/web-hosting/) umożliwiającej szybsze przechowywanie danych. Znacznik HTML używany do wyświetlania obrazu jest znacznikiem `<img>`. W przeciwieństwie do tych, które widzieliśmy wcześniej, nie ma otwartości i zamknięcia tego elementu. Porozmawiamy o autofermantycznym tagu. Są to atrybuty tego znacznika, które umożliwiają powiązanie lokalizacji pliku z opisowym tekstem obrazu. ##### **Optymalizacja obrazów** Duży obraz to obraz, który zajmie dużo czasu, zwłaszcza jeśli internauci używają smartfona lub tabletu podłączonego do sieci 4G lub 5G. Ogólnie rzecz biorąc, musisz zoptymalizować obrazy i ograniczyć ich wagę. Waga jest wyrażona w bajtach. Zazwyczaj używane jednostki to kilobajty (1 kb = 1,000 bajtu) lub megabajt (1 MB = 1,000,000 bajtów). Obraz powyżej kilkudziesięciu KB jest uważany za ciężki i zasługuje na optymalizację. **Przykład**: jeśli każdy z twoich obrazów waży 1 MB, będziesz ograniczony do mniej niż 100 obrazów na darmowym hostingu. Jeśli uda ci się zmniejszyć ich rozmiar do 50kb-200kb, będziesz mógł wyświetlić ich nawet kilka tysięcy na swojej stronie. Zalecenia dotyczące najlżejszych plików: - ograniczaj definicję obrazków zmieniając ich rozmiar do rozmiaru, na jakim będą wyświetlane na Twojej stronie; - rozmiar wyraża się w pikselach szerokości×wysokość (np. 300×250 pikseli to szerokość standardowego obrazu reklamowego); - zmień rozdzielczość (opcja "web" wykorzystuje domyślną rozdzielczość 72 dpi); - preferuj kompresowane formaty, takie jak _JPEG_, _PNG_ lub _Webp_; - można również używać formatu wektorowego (SVG); - unikaj niekompresowanych formatów _BPM_ i _TIFF_. ##### **Przechowywanie obrazów na hostingu** Ze względu na czytelność, obrazy przechowuje się w dedykowanym katalogu: ![Drzewo plików i folderów](/images/assets/screens/other/web-tools/vscode/create-your-personal-webpage-1.png) Weźmy przykład pliku w formacie _PNG_. Umieść go w katalogu "images": ![Drzewo plików i folderów z obrazem](/images/assets/screens/other/web-tools/vscode/create-your-personal-webpage-2.png) Teraz utworzymy nowy punkt, w którym umieścimy obraz (w tym przykładzie nie określamy wielkości wyświetlania obrazu w pikselach. Przeglądarka wyświetla go w zależności od oryginalnego rozmiaru, w formie pliku). ```html <body> <h1>Witamy na mojej stronie osobistej</h1> <h2>Szybkie i proste tworzenie strony WWW</h2> <p> <img src="images/logo-ovhcloud.png" alt="Logo OVHcloud"/> </p> <p>OVHcloud oferuje darmowy hosting dla każdej zarejestrowanej domeny.</p> <p>Oferta "Domena" zawiera:</p> <ul> <li>Hosting WWW 100 MB gratis</li> <li>Konto E-mail 5 GB za darmo</li> <li>DNSSEC: ochrona przed zatruciem cache (cache poisoning)</li> <li>Easy Redirect: dostęp do sieci społecznościowych z domeny</li> </ul> </body> ``` Wynik w przeglądarce powinien być następujący: ![Wynik kodu HTML w przeglądarce](/images/assets/screens/other/browsers/web-pages/create-your-personal-webpage-3-pl.png) ### Aplikuj na Twoje treści korzystając ze stylów CSS Widzieliśmy, jak uporządkować zawartość w HTML. Rezultat jest minimalistyczny w stylu, który ogranicza się do rozmiarów papierów i napisów zdefiniowanych domyślnie. Arkusze stylów umożliwiają zmianę wyglądu i zachowania elementów zakodowanych w HTML. #### Zasady ##### **Tworzenie pliku CSS** Podobnie jak w przypadku plików HTML, pliki CSS mogą być tworzone z dowolnym edytorem tekstu. Rozszerzenie tych plików musi być dostępne w formacie _.css_. ![Umieszczenie pliku CSS](/images/assets/screens/other/web-tools/vscode/create-your-personal-webpage-4.png) Teraz musimy powiązać ten plik CSS, który nazwaliśmy konwencją _style.css_, z naszą stroną HTML. Link ten jest wykonywany poprzez dodanie znacznika `<link>` do znacznika `<head>` w pliku index.html: ```html <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale="1.0""> <title>Moja strona osobista ``` Aby sprawdzić, w naszym arkuszu stylów zapiszemy kolor określony dla każdego elementu `

` na naszej stronie internetowej. Zmień plik style.css dodając te linie: ```html h1 { color: red; } ``` Ten zbiór instrukcji nazywany jest "regułą CSS" i oznacza: wszystkie elementy HTML `

` będą miały kolor _(color)_ czerwony _(red)_. Możesz przetestować inny kolor na elemencie `

`, paragrafy i elementy listy: ```html h1 { color: red; } h2 { color: blue; } p { color: slategray; } li { color: slategray; } ``` Odśwież stronę przeglądarki, naciskając klawisz `F5`: twój tytuł zostanie teraz wyświetlony na czerwono. Przeglądarki mają domyślne style, w tym szczegółowe reguły pozycjonowania elementów. Zmodyfikujemy odpowiednio plik CSS i określimy regułę, która będzie miała zastosowanie do wszystkich elementów HTML wyświetlanych przez przeglądarkę. Używa się uniwersalnego selektywnika `*` (gwiazda), który jest ustawiany na początku pliku CSS: ```html * { padding: 0; margin: 0; } ``` Zauważcie, że teksty są teraz przyklejone do krawędzi przeglądarki. Własność padding definiuje obracającą krawędź (wewnętrzny margines), czyli przestrzeń poza blokiem, który zawiera tekst (lub jakikolwiek element). Poniższy schemat ilustruje zgodność tych terminów w tzw. modelu pudełek w CSS: ![Model pudełka CSS](/images/assets/schemas/web-hosting/create-your-personal-webpage-5.png) ### Poprawa struktury HTML dokumentu Umieściliśmy podstawowe elementy w Twoim znaczniku ``: `h1`, `h2`, `p`, `ul` i `li`. W swojej ostatniej iteracji język [HTML5](https://html.spec.whatwg.org/) proponuje nowe znaczniki, które pozwalają lepiej ustrukturyzować dokument i wzbogacić go z semantycznego punktu widzenia. Klasyczny dokument (w tym na tradycyjnym nośniku) zawiera wizualnie możliwe do zidentyfikowania bloki, które można odtworzyć w HTML: - nagłówek, który będzie umieszczony w znaczniku `
` (nie mylić z znacznikiem ``); - główny element, określony przez tag `
`; - wreszcie, stopka-strona, opisane przez element `