1. Nagłówki
HTML dostarcza wiele tagów do formatowania i strukturyzacji treści tekstowych, obrazów, linków i list. Podstawowe tagi HTML pozwalają stworzyć czytelną i logicznie zorganizowaną stronę, która wygląda atrakcyjnie i wygodnie w odbiorze. Przyjrzyjmy się najbardziej popularnym podstawowym tagom i ich zastosowaniom.
Nagłówki (lub header) używane są do oznaczania różnych poziomów nagłówków na stronie. HTML dostarcza sześć poziomów nagłówków — od <h1> do <h6>, gdzie <h1> to największy i najważniejszy nagłówek, a <h6> — najmniejszy.
<h1>Główny nagłówek strony</h1>
<h2>Podtytuł pierwszego poziomu</h2>
<h3>Podtytuł drugiego poziomu</h3>
...
<h6>Najmniejszy nagłówek</h6>
Użycie nagłówków pomaga strukturyzować informacje tekstowe, a także poprawia SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki biorą pod uwagę nagłówki podczas analizy zawartości strony.
2. Formatowanie tekstu
Do formatowania tekstu HTML oferuje kilka prostych, ale potężnych tagów.
Akapity
Teraz, gdy poznaliśmy nagłówki, pora zwrócić uwagę na tekst. Akapity w HTML tworzy się za pomocą tagu <p>. To jak w ulubionych edytorach tekstu, gdzie naciskasz "Enter", aby rozpocząć nowy akapit. Oto przykład:
<p>To jest pierwszy akapit na naszej stronie i powie ci trochę więcej o naszym temacie.</p>
<p>A to już drugi akapit, bo „pierwszy” czasem nie wystarcza, by przekazać wszystkie myśli!</p>
Bloki tekstowe
Nie zapomnij o <span> i <div>. <span> — to twoi skromni pomocnicy do stylizowania fragmentów tekstu w kodzie HTML, a <div> — to prawdziwy mistrz do tworzenia bloków i kontenerów.
<div>Ten blok może zawierać wiele ciekawych rzeczy!</div>
<span>A ten tekst może być wyróżniony kolorem lub czcionką.</span>
Pogrubiony tekst
Pogrubiony tekst — <b>: Tag <b> wyróżnia tekst pogrubioną czcionką. Ten tag często używany jest do podkreślenia ważności poszczególnych słów lub fraz.
<p>To jest <b>ważny tekst</b>, który przykuwa uwagę.</p>
Pochyły tekst
Kursywa — <i>: Tag <i> sprawia, że tekst jest pochylony. Pasuje do wyróżniania cytatów, słów obcojęzycznych lub innych elementów wymagających akcentu.
<p>To jest tekst kursywą: <i>przykład tekstu pochylonego</i>.</p>
3. Obrazy
Do dodawania obrazów na stronę używa się tagu <img>. Jest to pojedynczy tag, wymagający podania ścieżki do obrazu przy użyciu atrybutu src. Dodatkowo, ważne jest dodanie opisu obrazu przy pomocy atrybutu alt (tekst alternatywny), żeby użytkownicy z ograniczeniami lub w przypadku problemów z ładowaniem obrazu mieli pojęcie, co powinno być przedstawione.
<img src="image.jpg" alt="Opis obrazu">
Inne przydatne atrybuty <img>:
-
width— szerokość obrazu (np.width="200"). -
height— wysokość obrazu (np.height="150").
Przykład z atrybutami width i height:
<img src="http://google.com/image.jpg" alt="Opis obrazu" width="200" height="150">
4. Hiperłącza
Linki — ważny element HTML, który pozwala użytkownikom przechodzić na inne strony lub zasoby. Linki tworzone są za pomocą tagu <a>, gdzie kluczowym atrybutem jest href, wskazujący docelowy adres URL.
<a href="https://example.com">Przejdź do strony przykładowej</a>
Przydatne atrybuty linków:
-
target="_blank"— otwiera link w nowej karcie. -
title="Podpowiedź"— dodaje podpowiedź wyświetlaną po najechaniu na link.
Przykład linku z dodatkowymi atrybutami:
<a href="https://example.com" target="_blank" title="Otworzy się w nowej karcie">Odwiedź naszą stronę</a>
5. Listy
Listy pomagają organizować informacje w łatwe do odbioru bloki. HTML wspiera dwa typy list:
Lista punktowana
Lista wypunktowana (nieuporządkowana) — <ul>: Elementy w tej liście oznaczone są punktami.
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>
Lista numerowana
Lista numerowana (uporządkowana) — <ol>: Elementy tej listy są automatycznie numerowane.
<ol>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ol>
Elementy w listach tworzone są za pomocą tagu <li>, który umieszczany jest wewnątrz <ul> lub <ol>. Listy szeroko stosowane są do tworzenia menu, sekwencji działań, list punktów i innych uporządkowanych danych.
6. Przykład użycia wszystkich podstawowych tagów
Teraz połączymy wszystkie opisane tagi w jeden fragment HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykładowa strona z podstawowymi tagami HTML</title>
</head>
<body>
<h1>Nagłówek strony</h1>
<h2>Podtytuł</h2>
<p>To jest przykład akapitu, w którym jest <b>pogrubiony tekst</b> i <i>pochyły tekst</i>.</p>
<h3>Obraz</h3>
<img src="image.jpg" alt="Przykład obrazu" width="200" height="150">
<h3>Link</h3>
<p>Oto <a href="https://example.com" target="_blank" title="Przykład strony">link do zewnętrznej strony</a>.</p>
<h3>Przykład listy punktowanej</h3>
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ul>
<h3>Przykład listy numerowanej</h3>
<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
</ol>
</body>
</html>
Podsumowanie
Teraz, gdy masz wyobrażenie o tym, jak używać podstawowych tagów HTML, możesz zacząć eksperymentować z ich łączeniem, aby tworzyć bardziej złożone strony. Spróbuj stworzyć swoją własną stronę HTML z nagłówkiem, kilkoma akapitami i obrazem, który będzie linkiem do innego zasobu.
W świecie HTML znajomość tagów — to dopiero początek. To jak wiedza, gdzie na klawiaturze znajdują się ulubione klawisze. W następnych wykładach zajmiemy się CSS, który pomoże nam stylizować te elementy i nadać im wygląd zgodny z naszym pomysłem. A tymczasem eksperymentuj i pamiętaj, że wyrażenie „spójrz pod maskę” — świetnie opisuje pracę z HTML.
Na tym zakończymy nasz mały, ale intensywny wykład. Mam nadzieję, że zrozumiałeś, że HTML — to serce twoich stron internetowych. Teraz wiesz, jak zrobić pierwszy krok w tworzeniu stron: napisać kod, który zrozumie przeglądarka!
GO TO FULL VERSION