HTML komendy – kompletny przewodnik

HTML to podstawa tworzenia stron internetowych, a znajomość komend i tagów jest niezbędna dla każdego webmastera. W tym artykule przedstawimy najważniejsze komendy HTML, które pomogą Ci stworzyć atrakcyjną i funkcjonalną stronę internetową.

Zobacz także: H1 html – najważniejszy nagłówek na Twojej stronie.

Czym są komendy HTML?

Komendy HTML to specjalne znaczniki, które określają strukturę i wygląd strony internetowej. Pozwalają one na dodawanie tekstu, obrazków, linków, formularzy i wielu innych elementów do strony. Każda komenda składa się z nazwy tagu, otwierającego i zamykającego znacznika oraz treści znajdującej się między nimi.

Najważniejsze komendy HTML

Tagi nagłówków

Tagi nagłówków pozwalają na podział tekstu na sekcje o różnym poziomie ważności. Oto lista najważniejszych tagów HTML związanych z nagłówkami:

<h1></h1> – najważniejszy nagłówek, atrybuty: brak
<h2></h2> – mniej ważny nagłówek niż h1, atrybuty: brak
<h3></h3> – jeszcze mniej ważny nagłówek niż h2, atrybuty: brak
<h4></h4> – itd., atrybuty: brak

Tagi nagłówków pozwalają na łatwiejsze przyswojenie informacji przez użytkowników oraz ułatwiają nawigację po stronie internetowej. Warto pamiętać, aby stosować odpowiedni poziom ważności nagłówków oraz formatować je w sposób spójny z całą stroną.

Tagi tekstu

Tagi tekstu pozwalają na zmianę formatowania tekstu na stronie internetowej. Oto lista 15 przydatnych komend HTML do formatowania tekstu:

<b></b> – pogrubienie tekstu
<i></i> – pochylanie tekstu
<u></u> – podkreślenie tekstu
<em></em> – akcentowanie tekstu
<strong></strong> – wyróżnienie tekstu pogrubieniem
<sup></sup> – górny indeks tekstu
<sub></sub> – dolny indeks tekstu
<del></del> – przekreślenie tekstu
<ins></ins> – podkreślenie tekstu
<mark></mark> – wyróżnienie tekstu kolorem tła
<small></small> – zmniejszenie rozmiaru tekstu
<big></big> – zwiększenie rozmiaru tekstu
<code></code> – kod programu lub skryptu
<pre></pre> – zachowanie formatowania tekstu z odstępami i nowymi liniami
<q></q> – cytowanie tekstu

Wykorzystanie tych tagów pozwala na dostosowanie formatowania tekstu na stronie do indywidualnych potrzeb. Zastosowanie kilku tagów na raz pozwala na uzyskanie ciekawych efektów, np. pogrubienie i pochylenie tekstu jednocześnie.

Tagi obrazków

Tagi obrazków pozwalają na wyświetlenie grafik na stronie internetowej. Oto lista najważniejszych tagów HTML związanych z obrazkami:

<img></img> – wstawienie obrazka na stronę, atrybuty: src (adres URL obrazka), alt (alternatywny tekst wyświetlany w przypadku niepowodzenia wczytania obrazka), width (szerokość obrazka), height (wysokość obrazka), border (grubość obramowania obrazka), align (wyrównanie obrazka w tekście)
<map></map> – zdefiniowanie mapy obrazka, czyli obszarów, które po kliknięciu przeniosą użytkownika na inny adres URL
<area></area> – zdefiniowanie obszaru mapy obrazka, czyli określenie położenia i wymiarów obszaru oraz adresu URL, na który ma przenieść użytkownika po kliknięciu
<figure></figure> – zdefiniowanie pojedynczego obrazka lub grupy obrazków wraz z opisem tekstu
<figcaption></figcaption> – dodanie opisu do obrazka wewnątrz elementu <figure>

Do tagów obrazków często dodaje się także atrybuty CSS, pozwalające na bardziej zaawansowane formatowanie obrazka, np.:

border – grubość obramowania obrazka
margin – marginesy wokół obrazka
padding – odstępy między obramowaniem a obrazkiem
float – wyrównanie obrazka w tekście
opacity – przezroczystość obrazka

Wykorzystanie tagów obrazków i odpowiednie formatowanie pozwala na poprawienie atrakcyjności wizualnej strony oraz ułatwia przyswajanie informacji przez użytkowników.

Tagi linków

Tagi linków pozwalają na umieszczenie na stronie internetowej odnośników do innych stron lub plików. Oto lista najważniejszych tagów HTML związanych z linkami:

<a></a> – umieszczenie odnośnika na stronie, atrybuty: href (adres URL do którego prowadzi odnośnik), target (określa, w jaki sposób ma być otwarty adres docelowy, np. w nowym oknie)
<link></link> – łączy stronę z plikiem CSS, atrybuty: href (adres URL pliku CSS), type (typ pliku, np. text/css)
<script></script> – łączy stronę z plikiem JavaScript, atrybuty: src (adres URL pliku JavaScript), type (typ pliku, np. text/javascript)

Dodatkowo, często wykorzystuje się atrybuty CSS w celu zmiany formatowania linków, np.:

color – kolor linku
text-decoration – podkreślenie, przekreślenie lub brak ozdobników dla linków
hover – zmiana formatowania linku po najechaniu na niego kursorem

Linki są ważnym elementem strony internetowej, pozwalającym na przekierowywanie użytkowników na inne strony lub pobieranie plików. Warto pamiętać, aby były one czytelne i jasno określały cel do którego prowadzą, co ułatwia nawigację użytkownikom.

Tagi formularzy

Tagi formularzy pozwalają na tworzenie na stronie internetowej interaktywnych formularzy, za pomocą których użytkownicy mogą przesyłać dane do serwera. Oto lista najważniejszych tagów HTML związanych z formularzami:

<form></form> – tworzenie formularza, atrybuty: action (adres URL, na który przesyłane są dane formularza), method (metoda przesyłania danych, np. GET lub POST)
<input></input> – umieszczenie pola do wprowadzenia danych, atrybuty: type (typ pola, np. text, password, checkbox), name (nazwa pola, używana w celu identyfikacji podczas przesyłania danych), value (domyślna wartość pola)
<select></select> – umieszczenie listy wyboru, atrybuty: name (nazwa listy, używana w celu identyfikacji podczas przesyłania danych)
<option></option> – umieszczenie pojedynczego elementu na liście wyboru, atrybuty: value (wartość, która zostanie przesłana do serwera w przypadku wyboru danej opcji)
<textarea></textarea> – umieszczenie pola tekstowego, atrybuty: name (nazwa pola, używana w celu identyfikacji podczas przesyłania danych)

Tagi formularzy pozwalają na zwiększenie interaktywności strony internetowej oraz ułatwiają przetwarzanie danych przesłanych przez użytkowników. Warto pamiętać o odpowiednim formatowaniu i opisaniu pól formularza, co ułatwi użytkownikom przyswojenie informacji oraz poprawi doświadczenie z korzystania z formularza.