Aby edytować stronę internetową w HTML, należy poznać podstawy języka HTML (HyperText Markup Language) – głównego budulca każdej strony. Poniżej znajdziesz szczegółowy poradnik, dzięki któremu nauczysz się modyfikować istniejącą stronę lub tworzyć własne dokumenty HTML od podstaw.
Podstawy html – budowa strony
Każda strona HTML opiera się na tej samej strukturze:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
</head>
<body>
<!-- Zawartość strony pojawia się tutaj -->
</body>
</html>
Wyjaśnienie elementów:
- <!DOCTYPE html> – deklaracja typu dokumentu, informuje przeglądarkę, że to dokument HTML5;
- <html> – główny kontener dla całej strony;
- <head> – zawiera metadane, np. kodowanie znaków, tytuł strony;
- <body> – tutaj umieszcza się całą widoczną treść strony.
Podstawowe znaczniki html
Do tworzenia i edycji zawartości strony wykorzystaj m.in. następujące elementy:
- Nagłówki –
<h1>Główny nagłówek</h1>
<h2>Podnagłówek</h2>
- Paragrafy (akapit) –
<p>To jest pojedynczy akapit tekstu.</p>
- Listy –
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
</ul>
- Obrazy –
<img src="obraz.jpg" alt="Opis obrazka">
- Linki (odnośniki) –
<a href="https://przyklad.pl">Kliknij tutaj</a>
- Podziały sekcji –
<div>
<!-- Większe bloki treści -->
</div>
<span>
<!-- Krótki fragment tekstu wewnątrz akapitu -->
</span>
Edycja istniejącej strony html
-
Znajdź plik HTML
Zwykle jest to np.index.htmlw folderze projektu strony. -
Otwórz plik w edytorze tekstowym
Do edycji możesz użyć prostego Notatnika lub edytorów jak Visual Studio Code, Sublime Text czy Atom. -
Znajdź fragment do edycji
Przykładowo, aby zmienić nagłówek strony z „Witaj na stronie!” na „Witaj w poradniku HTML!”:Było –
<h1>Witaj na stronie!</h1>Po edycji –
<h1>Witaj w poradniku HTML!</h1> -
Zapisz zmiany (skrót Ctrl+S).
-
Odśwież stronę w przeglądarce, by zobaczyć efekty.
Przykłady praktyczne
Dodanie niebieskiego tekstu z użyciem stylów
Możesz dodać atrybut style, by zmienić wygląd tekstu bezpośrednio w HTML:
<p style="color: blue;">Ten tekst jest niebieski</p>
Dodanie nowego linku
Aby dodać hiperłącze do innej strony:
<p>Odwiedź naszą <a href="https://przyklad.pl">główną stronę</a>.</p>
Dodanie obrazka
Aby wyświetlić grafikę na stronie:
<img src="logo.png" alt="Logo firmy">
Dobre praktyki podczas edycji html
- Stosuj czytelne wcięcia. Pomaga to utrzymać porządek w kodzie.
- Dodawaj opisy (komentarze) –
<!-- To jest komentarz w kodzie HTML -->
- Testuj zmiany na różnych przeglądarkach.
- Nie edytuj bez kopii zapasowej. Przed większą zmianą zapisz oryginalną wersję pliku.
Rozszerzanie możliwości – formularze i tabele
Obok podstawowych elementów możesz dodać bardziej zaawansowane komponenty, jak formularze czy tabele:
Przykład formularza –
<form>
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie">
<input type="submit" value="Wyślij">
</form>
Przykład tabeli –
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
</tr>
<tr>
<td>Anna</td>
<td>Kowalska</td>
</tr>
</table>
Najczęstsze błędy przy edycji html
- Brak zamknięcia tagów –
Każdy otwarty znacznik (np.<div>) musi być odpowiednio zamknięty (</div>); - Zagnieżdżanie elementów w niewłaściwy sposób –
Nie można np. umieścić paragrafu w środku listy bezpośrednio; - Błędna ścieżka do pliku –
Jeśli obrazek się nie wyświetla, upewnij się, że ścieżka w src wskazuje właściwy plik.
Podsumowanie
Edycja strony internetowej w HTML polega na ręcznej modyfikacji pliku HTML, poprzez edytowanie znaczników, dodawanie nowych elementów, atrybutów oraz ich stylów. Samodzielna praca z HTML to podstawa dla każdego, kto chce nauczyć się budować i rozwijać własne strony internetowe, a praktyczne przykłady są najlepszą metodą nauki nowych technik.
