Witaj!
Jeśli dopiero zaczynasz swoją przygodę z tworzeniem stron internetowych, HTML (HyperText Markup Language) będzie Twoim pierwszym krokiem. HTML jest podstawowym językiem używanym do tworzenia struktur i treści stron internetowych. W tym prostym poradniku omówimy podstawowe koncepcje HTML i pokażemy Ci, jak rozpocząć tworzenie swoich własnych stron internetowych.
Czym jest HTML?
HTML jest językiem znaczników, który definiuje strukturę i zawartość strony internetowej. Składa się z zestawu elementów, zwanych tagami, które określają, jak treść ma być wyświetlana w przeglądarce internetowej.
1. Tworzenie podstawowej struktury HTML
Pierwszym krokiem w tworzeniu strony HTML jest stworzenie pliku HTML. Wystarczy użyć prostego edytora tekstu, takiego jak Notepad lub Visual Studio Code. Następnie utwórz nowy plik o rozszerzeniu .html Poniżej znajdziesz podstawową strukturę HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja pierwsza strona</title>
</head>
<body>
Moja pierwsza strona!
</body>
</html>
Struktura strony HTML
Strona HTML składa się z dwóch głównych części: <head> i <body>.
<head>: Ta sekcja zawiera metadane strony, takie jak tytuł strony, linki do arkuszy stylów CSS, skrypty JavaScript oraz inne informacje, które nie są wyświetlane bezpośrednio na stronie.
<body>: To tutaj umieszczasz główną treść strony, taka jak tekst, obrazy, nagłówki, odnośniki i wiele więcej.
Podstawowe tagi HTML
Oto kilka podstawowych tagów HTML, które powinieneś poznać:
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Nagłówki o różnych poziomach ważności.
- <p>: Paragraf tekstu.
- <a href=”#”>: Odnośnik (link) do innej strony lub pliku.
- <img src=”ścieżka/do/obrazka.jpg” alt=”Opis alternatywny”>: Wstawianie obrazka.
- <ul>: Lista nieuporządkowana.
- <ol>: Lista uporządkowana.
- <li>: Pozycja w liście.
Przykład prostego dokumentu HTML
Oto przykład prostego dokumentu HTML zawierającego kilka podstawowych elementów:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykładowa strona HTML</title>
</head>
<body>
<h1>Witaj, świecie!</h1>
<p>To jest mój pierwszy paragraf na stronie internetowej.</p>
<a href="https://www.example.com">Przejdź do strony przykładowej</a>
<img src="obrazek.jpg" alt="Przykładowy obrazek">
</body>
Rozwijaj swoje umiejętności z nami!
za niedługo więcej 🙂