Lekcja 50 - Strona internetowa - publikacja w Internecie

📚

Teoria

▼

Jak strona trafia do Internetu?

Aby strona internetowa byla dostepna dla wszystkich, potrzebujemy trzech elementow:

Pliki strony - gotowy kod HTML, CSS, obrazy
Hosting - serwer, na ktorym pliki sa przechowywane 24/7
Domena - adres, pod ktorym uzytkownicy znajda strone (np. mojastrona.pl)

                    GitHub Pages to darmowa usluga hostingowa od GitHuba, idealna do nauki. Pozwala opublikowac statyczna strone HTML/CSS bezposrednio z repozytorium Git. Adres: nazwauzytkownika.github.io
                

Hosting - gdzie przechowywac strone?

Hosting wspoldzielony - wiele stron na jednym serwerze (najtanszy, np. nazwa.pl, home.pl)
VPS (Virtual Private Server) - wirtualny serwer dedykowany
Hosting dedykowany - caly serwer fizyczny dla jednej strony
Hosting chmurowy - skalowalne rozwiazania (AWS, Google Cloud, Azure)
Darmowe opcje: GitHub Pages, Netlify, Vercel, InfinityFree

Domena - adres strony

Domena glowna: mojastrona.pl, firma.com
Subdomena: blog.mojastrona.pl, sklep.firma.com
Rozszerzenia: .pl (Polska), .com (komercyjna), .org (organizacje), .edu (edukacja)
Rejestracja: domeny kupuje sie u rejestratora (np. nazwa.pl, OVH, GoDaddy)
DNS (Domain Name System) - system tlumaczacy nazwe domeny na adres IP serwera

Publikacja przez GitHub Pages - krok po kroku

Zaloz konto na github.com
Stworz nowe repozytorium o nazwie nazwauzytkownika.github.io
Wgraj pliki strony (index.html, style.css, obrazy)
Przejdz do Settings > Pages i wybierz galaz "main"
Po chwili strona bedzie dostepna pod adresem: https://nazwauzytkownika.github.io

Przesylanie plikow - FTP/SFTP

Tradycyjny sposob publikacji strony to przeslanie plikow na serwer za pomoca protokolu FTP (File Transfer Protocol) lub bezpiecznego SFTP:

Klient FTP: FileZilla (darmowy, wieloplatformowy)
Dane do polaczenia: adres serwera, login, haslo, port (21 lub 22)
Katalog public_html - folder, do ktorego wgrywamy pliki strony

Testowanie przed publikacja

Sprawdz strone w roznych przegladarkach (Chrome, Firefox, Safari, Edge)
Przetestuj na urzadzeniach mobilnych (responsywnosc)
Zwaliduj kod HTML i CSS (validator.w3.org)
Sprawdz wszystkie linki i obrazy
Przetestuj szybkosc ladowania (Google PageSpeed Insights)

✏️

Zadania

▼

Latwe

Zadanie 1: Konto GitHub

Zaloz konto na GitHub.com (jesli jeszcze nie masz). Stworz nowe repozytorium o nazwie "moja-pierwsza-strona". Wgraj do niego plik index.html z poprzednich lekcji oraz plik style.css. Udostepnij link do repozytorium nauczycielowi.

Srednie

Zadanie 2: GitHub Pages

Opublikuj swoja strone na GitHub Pages: a) stworz repozytorium nazwauzytkownika.github.io, b) wgraj pliki strony (min. 3 podstrony z nawigacja), c) wlacz GitHub Pages w ustawieniach, d) przetestuj strone pod wygenerowanym adresem. Zapisz adres URL.

Srednie

Zadanie 3: Analiza hostingu

Porownaj 3 rozne uslugi hostingowe (np. nazwa.pl, home.pl, OVH). Dla kazdej sprawdz: a) cene roczna, b) pojemnosc dysku, c) liczbe baz danych, d) certyfikat SSL, e) wsparcie techniczne. Przedstaw wyniki w tabeli HTML na swojej stronie.

Trudne

Zadanie 4: Kompletny projekt strony

Stworz i opublikuj kompletna strone internetowa (min. 5 podstron): strona glowna, o mnie, galeria, kontakt, blog. Kazda podstrona ma wspolna nawigacje i stopke. Opublikuj na GitHub Pages. Strona musi przejsc walidacje W3C i byc czytelna na telefonie.

🎥

Materialy wideo

▼

Canva strona internetowa za DARMO. Jak zrobić stronę www? Poradnik krok po kroku.

Michał Bidziuch

Strona internetowa w 3 minuty? ⏱️ AI zrobi ją ZA CIEBIE! (Bez kodowania)

Jak stworzyć stronę internetową krok po kroku!

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

📜

Podstawa programowa

▼

Lekcja 50: Strona internetowa - publikacja w Internecie