1. Tworzenie tekstu
Kontynuujmy naukę HTML...
Akapity (p)
Tag <p> jest używany do tworzenia akapitów
tekstu. Akapity pomagają podzielić tekst na logiczne bloki, poprawiając
czytelność i odbiór informacji.
Przykład:
<p>To jest pierwszy akapit tekstu. Zawiera pewną ilość informacji.</p>
<p>To jest drugi akapit tekstu. Jest oddzielony od pierwszego akapitu.</p>
Pogrubiony tekst (b)
Tag <b> służy do wyróżnienia tekstu pogrubionym
(bold) fontem. Umożliwia to podkreślenie znaczenia określonych
słów lub fraz.
<p>To jest <b>ważny</b> tekst.</p>
Kursywa (i)
Tag <i> służy do wyróżniania tekstu kursywą
(pochylonym fontem, italic). Jest często używany do
oznaczania terminów, tytułów książek, obcych słów itp.
Przykład:
<p>To jest <i>termin</i>, który wyróżniono kursywą.</p>
2. Nagłówki (h1 - h6)
Nagłówki w HTML są używane do strukturyzacji zawartości i
tworzenia hierarchii nagłówków na stronie. Istnieje sześć poziomów
nagłówków, gdzie <h1> jest najważniejszy, a
<h6> — najmniej ważny.
-
<h1>— Najważniejszy i największy nagłówek. Zazwyczaj używany jako główny tytuł strony. -
<h2>— Używany do podtytułów, które występują po<h1>. -
<h3>— Poziom nagłówka poniżej<h2>. -
<h4>— Poziom nagłówka poniżej<h3>. -
<h5>— Poziom nagłówka poniżej<h4>. -
<h6>— Najmniej ważny i najmniejszy nagłówek.
Przykład:
<h1>Główny nagłówek strony</h1>
<h2>Podtytuł poziomu 2</h2>
<h3>Podtytuł poziomu 3,</h3>
3. Dodatkowe tagi w head-dokumencie
Są tagi, które możecie spotkać w przyszłości w przykładach HTML. Chciałbym powiedzieć o nich kilka słów:
1. Tag <title>
Tag <title> ustawia
nazwę strony widoczną na karcie przeglądarki. To pierwsza rzecz, którą widzi użytkownik po otwarciu strony. Prawie zawsze
obecny na wszystkich stronach. Domyślnie dodawany przez edytor HTML, ale
dla projektów edukacyjnych nie ma szczególnej wartości.
2. Tag <meta charset="UTF-8">
Tag <meta> wewnątrz
<head> ustawia kodowanie znaków dla dokumentu.
UTF-8 to najczęściej używane kodowanie, które obsługuje większość języków świata. O kodowaniach powiemy
trochę później.
3. Tag
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Ten tag również znajduje się wewnątrz
<head>. Zapewnia
poprawne wyświetlanie strony na urządzeniach mobilnych. Ustawia szerokość widoku (viewport) równą szerokości ekranu
urządzenia i początkową skalę strony.
4. Tag <link rel="stylesheet" href="styles.css">
Tag <link/> ładuje
zewnętrzny plik CSS do stylizacji strony.
Atrybut rel="stylesheet" wskazuje, że to jest tabela stylów, a
href="styles.css" podaje ścieżkę do pliku stylów.
5. Tag <script src="script.js" defer></script>
Tag <script> ładuje
zewnętrzny plik JavaScript do dodania interaktywności na
stronę. Atrybut src podaje ścieżkę do pliku skryptu, a
defer informuje przeglądarkę, że skrypt ma być wykonany po
załadowaniu dokumentu HTML.
GO TO FULL VERSION