Tworzenie prostej strony HTML
1. Dlaczego potrzebujemy strony w HTML?
Witaj w fascynującym świecie web developmentu! Dziś będziemy tworzyć prostą statyczną stronę HTML i umieszczać ją na serwerze, który skonfigurowałeś w poprzednich wykładach. Nawet jeśli nigdy wcześniej nie pisałeś kodu HTML, spokojnie – wszystko będzie jasne. Naszym celem jest nie tylko zrozumienie podstaw HTML, ale także nauczenie się, jak udostępnić swoją stronę światu za pomocą serwera webowego.
A teraz zrobimy kolejny krok – stworzymy własną stronę w HTML i skonfigurujemy jej wyświetlanie za pomocą twojego serwera webowego. Gotowy na podbój przestrzeni internetowej? To zaczynajmy!
HTML (HyperText Markup Language) – to podstawa wszystkich stron internetowych. Odpowiada za strukturę i zawartość strony. W standardowym HTML możesz opisać nagłówki, tekst, zdjęcia, linki, a nawet tabele. Jest prosty do nauki, ale wystarczająco potężny, aby stać się podstawą dowolnej strony.
W prawdziwym świecie umiejętność pracy z statycznymi stronami HTML przydaje się w wielu sytuacjach:
- Szybkie tworzenie prototypów aplikacji internetowych.
- Pisanie i testowanie statycznych stron do dokumentacji.
- Przygotowanie podstawowego interfejsu dla aplikacji serwerowych.
A poza tym HTML to świetny sposób na przygotowanie CV w formie strony internetowej (tak, tak, rekruterzy czasem to uwielbiają). Dla nas, jako programistów, znajomość podstawowego HTML to absolutny must-have.
2. Krok 1. Podstawy HTML: tworzymy swoją pierwszą stronę
Programowanie to jak LEGO: ulubione zajęcie w każdym wieku. Zaczynamy od małej "cegiełki" – naszej pierwszej strony internetowej.
Minimalny przykład dokumentu HTML
Utwórz plik o nazwie index.html w dowolnym edytorze tekstowym (na przykład nano, vim lub nawet gedit, jeśli masz ochotę na trochę grafiki) i napisz poniższy kod:
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Cześć, świecie!</h1>
<p>To moja pierwsza strona internetowa w HTML.</p>
</body>
</html>Wyjaśnienie kodu
<!DOCTYPE html>– informuje przeglądarkę, że używamy HTML5.<html>– otwiera cały dokument. Cała zawartość strony znajduje się wewnątrz tego znacznika.<head>– sekcja na metainformacje o stronie (na przykład tytuł strony, podłączanie stylów lub skryptów).<title>– nazwa strony, wyświetlana na karcie przeglądarki.<body>– główna sekcja, gdzie umieszczona jest cała widoczna zawartość.<h1>– nagłówek strony pierwszego poziomu (im mniejsza liczba, tym większy nagłówek).<p>– akapit tekstu.
Tak, to tylko siedem linijek, ale to właśnie one staną się podstawą twojej strony!
3. Krok 2. Umieszczamy HTML-sit na serwerze
Teraz, gdy nasza strona jest gotowa, czas pokazać ją światu. Do tego użyjemy naszego web-serwera.
Przygotowanie folderu strony
Stwórz katalog do przechowywania plików swojej strony. Jeśli na przykład chcesz umieścić stronę na wirtualnym hostingu z domeną example.com, wykonaj:
sudo mkdir -p /var/www/example.com
Następnie przenieś swój plik index.html do tego folderu:
sudo cp index.html /var/www/example.com/
Prawdziwa magia się zaczyna – plik jest gotowy do działania.
4. Krok 3. Konfiguracja serwera internetowego do obsługi strony
Konfiguracja dla Nginx
Otwórz plik konfiguracji wirtualnego hosta:
sudo nano /etc/nginx/sites-available/example.comWstaw następującą konfigurację:
server { listen 80; server_name example.com; root /var/www/example.com; index index.html; location / { try_files $uri $uri/ =404; } }Aktywuj wirtualny host i zrestartuj serwer:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx
Konfiguracja dla Apache
Otwórz plik konfiguracji wirtualnego hosta:
sudo nano /etc/apache2/sites-available/example.com.confWstaw następującą konfigurację:
<VirtualHost *:80> ServerName example.com DocumentRoot /var/www/example.com <Directory /var/www/example.com> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory> </VirtualHost>Aktywuj wirtualny host i zrestartuj serwer:
sudo a2ensite example.com.conf sudo systemctl restart apache2
Testowanie strony
Teraz otwórz przeglądarkę, wpisz http://example.com (lub adres IP twojego serwera) i ciesz się rezultatem. Jeśli widzisz piękne "Cześć, świecie!" – gratulacje, wszystko działa!
5. Krok 4. Upiększamy naszą stronę
Statyka – to spoko, ale trochę CSS nikomu nie zaszkodzi. Dodajmy odrobinę stylów.
Dodaj nowy plik style.css w tym samym folderze /var/www/example.com/:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
h1 {
color: #ff5722;
}Teraz zaktualizuj swój index.html, dodając link do CSS:
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Cześć, świecie!</h1>
<p>To moja pierwsza strona internetowa w HTML.</p>
</body>
</html>Po odświeżeniu strony zobaczysz drobne zmiany w stylu. Teraz twoja strona wygląda trochę ładniej!
6. Typowe problemy i ich rozwiązanie
Podczas pracy ze stronami internetowymi możesz napotkać kilka problemów, ale spokojnie, mamy to ogarnięte:
Błąd "403 Forbidden". Sprawdź uprawnienia do folderu ze stroną. Użyj:
sudo chmod -R 755 /var/www/example.comBłąd "404 Not Found". Upewnij się, że pliki strony znajdują się w odpowiednim folderze i są poprawnie nazwane.
Strona się nie wyświetla. Sprawdź, czy serwis twojego serwera WWW jest uruchomiony:
sudo systemctl status nginx sudo systemctl status apache2
Teraz twoja strona jest dostępna dla każdego, kto zna jej adres. Czy to nie inspirujące? W następnych wykładach nauczysz się jeszcze więcej: jak dodać HTTPS dla bezpieczeństwa i zarządzać ustawieniami serwera.
GO TO FULL VERSION