Język znaczników HTML
HTML (HyperText Markup Language) to hipertekstowy język znaczników służący do tworzenia stron internetowych. Umożliwia on określenie struktury dokumentu oraz organizację informacji prezentowanych na stronie. Chociaż HTML pozwala również na podstawowe formatowanie wyglądu strony, do definiowania stylu i układu elementów zaleca się używanie CSS (Cascading Style Sheets) — kaskadowych arkuszy stylów.
Tworzenie strony HTML
Aby zbudować stronę internetową, należy zrozumieć, czym są znaczniki (tagi) i jak ich używać.
Znaczniki (tagi)
Znaczniki to podstawowe elementy języka HTML, które informują przeglądarkę, jak wyświetlić zawartość strony. Każdy znacznik jest otoczony nawiasami ostrymi < >. Przeglądarka interpretuje te znaczniki i odpowiednio formatuje zawartość.
Przykłady znaczników:
<img>— wstawia obrazek<br>— wstawia linię przerwy (nowy wiersz)<article>— definiuje niezależną część treści<form>— tworzy formularz interaktywny
Znaczniki otwierające i zamykające
Większość znaczników posiada parę: znacznik otwierający i zamykający. Zawartość, na którą wpływa znacznik, umieszczana jest pomiędzy nimi.
Przykład:
1
<b>Tekst pogrubiony</b>
Powyższy kod sprawi, że tekst “Tekst pogrubiony” zostanie wyświetlony pogrubioną czcionką.
Struktura dokumentu HTML
Każdy dokument HTML powinien zaczynać się od deklaracji typu dokumentu, która informuje przeglądarkę o wersji używanego standardu.
1
<!DOCTYPE html>
Następnie struktura dokumentu składa się z następujących elementów:
1
2
3
4
5
6
7
8
<html>
<head>
<!-- Sekcja nagłówkowa -->
</head>
<body>
<!-- Zawartość strony -->
</body>
</html>
Opis podstawowych znaczników:
<html>— korzeń dokumentu; wszystkie pozostałe elementy znajdują się wewnątrz tego znacznika.<head>— sekcja nagłówkowa zawierająca metadane dokumentu, takie jak:<title>— tytuł strony wyświetlany na karcie przeglądarki.<style>— definicje stylów CSS.<meta>— dodatkowe informacje, np. o kodowaniu znaków.
<body>— główna część dokumentu zawierająca treści wyświetlane użytkownikowi.
Podstawowe znaczniki HTML
Poznanie wszystkich znaczników HTML w trakcie jednych zajęć jest niemożliwe, dlatego skupimy się na najważniejszych z nich.
Nagłówki
Nagłówki służą do hierarchicznego porządkowania treści na stronie. Definiujemy je za pomocą znaczników od <h1> do <h6>, gdzie:
<h1>— najważniejszy, największy nagłówek.<h6>— najmniej ważny, najmniejszy nagłówek.
Przykład:
1
2
3
<h1>Najważniejszy Nagłówek</h1>
<h2>Podtytuł Sekcji</h2>
<h3>Podsekcja</h3>
Akapity
Akapity tekstu oznaczamy znacznikiem <p>.
Przykład:
1
<p>To jest przykładowy akapit tekstu na stronie internetowej.</p>
Linki (odsyłacze)
Linki do innych stron lub zasobów tworzymy za pomocą znacznika <a> z atrybutem href, który określa adres docelowy.
Przykład:
1
<a href="index.html">Powrót do strony głównej</a>
Wyjaśnienie:
<a>— znacznik tworzący odsyłacz.href="index.html"— atrybut określający adres URL lub ścieżkę do pliku.- Tekst pomiędzy znacznikami
<a>i</a>będzie klikalnym odnośnikiem.
Atrybuty znaczników
Niektóre znaczniki mogą posiadać atrybuty, które wpływają na ich działanie lub wygląd. Atrybuty umieszczamy wewnątrz znacznika otwierającego.
Przykład:
1
<input type="text" name="username" placeholder="Wpisz swoją nazwę użytkownika">
Wyjaśnienie:
<input>— znacznik pola wejściowego w formularzu.type="text"— określa typ pola (tekstowe).name="username"— nazwa pola używana przy przesyłaniu danych.placeholder="..."— tekst podpowiedzi wyświetlany w polu.
Tabele i listy
Tabele
Tabele służą do prezentacji danych w formie siatki składającej się z wierszy i kolumn.
Podstawowe znaczniki tabeli:
<table>— rozpoczyna i kończy tabelę.<tr>— definiuje wiersz tabeli.<th>— komórka nagłówkowa tabeli (zazwyczaj pogrubiona i wyśrodkowana).<td>— komórka z danymi.
Przykład:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>30</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
<td>25</td>
</tr>
</table>
Wyjaśnienie:
- Pierwszy wiersz zawiera nagłówki kolumn.
- Kolejne wiersze zawierają dane.
Listy
Listy umożliwiają przedstawienie elementów w sposób uporządkowany lub nieuporządkowany.
Rodzaje list:
Lista nieuporządkowana (wypunktowana) — używa znaczników
<ul>i<li>.Przykład:
1 2 3 4 5
<ul> <li>Element pierwszy</li> <li>Element drugi</li> <li>Element trzeci</li> </ul>
Lista uporządkowana (numerowana) — używa znaczników
<ol>i<li>.Przykład:
1 2 3 4 5
<ol> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ol>
Formularze
Formularze są kluczowym elementem interakcji użytkownika ze stroną internetową. Umożliwiają zbieranie danych od użytkowników, takich jak informacje kontaktowe, opinie czy zamówienia.
Struktura formularza:
<form>— znacznik otaczający cały formularz.action— adres, pod który zostaną wysłane dane z formularza.method— metoda przesyłania danych (getlubpost).
<fieldset>— grupuje powiązane elementy formularza.<legend>— opis grupy elementów w<fieldset>.<input>— różne typy pól wejściowych (tekstowe, przyciski, pola wyboru itp.).
Przykład formularza:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form name="formularzKontaktowy" action="mailto:przyklad@domena.pl" method="post">
<fieldset>
<legend>Dane Personalne</legend>
<label for="imie">Imię:</label>
<input type="text" id="imie" name="imie"><br><br>
<label for="nazwisko">Nazwisko:</label>
<input type="text" id="nazwisko" name="nazwisko"><br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Wyślij">
</fieldset>
</form>
Wyjaśnienie:
<form>name— nazwa formularza (opcjonalna).action— określa, gdzie zostaną przesłane dane (w tym przypadku na adres e-mail).method— określa metodę przesyłania danych (postjest używany dla danych wysyłanych w treści zapytania).
<fieldset>i<legend>— grupują elementy formularza i nadają im opis.<label>— etykieta dla pola formularza, powiązana z polem poprzez atrybutfor, który odpowiadaidpola<input>.<input>type— typ pola (np.text,email,submit).id— unikalny identyfikator pola (powiązany zlabel).name— nazwa pola (używana przy przesyłaniu danych).value— wartość pola (np. tekst na przyciskusubmit).
Uwaga: W rzeczywistych zastosowaniach zamiast mailto: w atrybucie action używa się adresu strony serwera, który przetwarza dane z formularza.
Zadanie
Stwórz prostą stronę internetową zawierającą:
- Tytuł strony ustawiony za pomocą znacznika
<title>. - Nagłówek główny (
<h1>) z nazwą strony. - Co najmniej dwa akapity tekstu (
<p>), opisujące dowolny temat. - Obrazek wstawiony za pomocą znacznika
<img>. - Listę nieuporządkowaną (
<ul>) z trzema elementami. - Link (
<a>) do innej strony internetowej (np. do swojej ulubionej strony). - Prosty formularz zawierający pola do wprowadzenia imienia i adresu e-mail oraz przycisk “Wyślij”.
Instrukcje:
- Utwórz nowy plik o nazwie
index.html. - Zapisz w nim kod HTML, uwzględniając wszystkie wymienione elementy.
- Otwórz plik w przeglądarce, aby zobaczyć efekt swojej pracy.
- Upewnij się, że wszystkie elementy są poprawnie wyświetlane i działają zgodnie z przeznaczeniem.
Dodatkowe wskazówki:
- Pamiętaj o poprawnej strukturze dokumentu HTML (deklaracja
<!DOCTYPE html>, znaczniki<html>,<head>,<body>). - Przy wstawianiu obrazka upewnij się, że plik graficzny znajduje się w odpowiedniej lokalizacji lub użyj obrazka z Internetu, podając pełny adres URL w atrybucie
src. - W formularzu użyj znaczników
<label>dla lepszej użyteczności. - Staraj się, aby strona była estetyczna i czytelna.