Tekst, obrazy, odnośniki i listy
Formatuj tekst za pomocą nagłówków i akapitów, osadzaj obrazy z tekstem alt, twórz hiperłącza oraz buduj listy uporządkowane i nieuporządkowane.
Tekst, obrazy, odnośniki i listy to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Nagłówki: od h1 do h6
HTML udostępnia sześć poziomów nagłówków. Używaj ich do tworzenia konspektu dokumentu, a nie do zmiany rozmiaru tekstu. Element <h1> to tytuł strony (raz na stronę), <h2> służy do oznaczania głównych sekcji, <h3> — podsekcji i tak dalej.
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>Akapity i <br>
Element <p> opakowuje akapit tekstu. Przeglądarka automatycznie dodaje odstępy nad nim i pod nim. Używaj elementu <br> oszczędnie — tylko w przypadku znaczących podziałów wiersza, na przykład w adresie lub wierszu, a nie do tworzenia odstępów między akapitami.
Elementy tekstu inline
Używaj elementów inline, aby nadać tekstowi znaczenie: <strong> oznacza ważny tekst (pogrubienie), <em> służy do wyróżnienia (kursywa), <code> oznacza fragmenty kodu, <mark> wyróżnia zaznaczony tekst, a <small> służy do drobnego druku.
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>Obrazy: element <img>
Element <img> osadza obraz. Atrybut src zawiera adres URL, a alt — tekst alternatywny dla czytników ekranu i na wypadek, gdyby obraz nie został załadowany. Zawsze podawaj sensowną wartość alt.
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">Pisanie dobrego tekstu alternatywnego
Tekst alternatywny powinien przekazywać treść i przeznaczenie obrazu. W przypadku obrazów dekoracyjnych (elementów rozdzielających i ikon służących wyłącznie do dekoracji) użyj alt="" (pustego ciągu), aby czytniki ekranu je pomijały. Nigdy nie pisz alt="image of" — po prostu opisz, co przedstawia obraz.
Hiperłącza: element <a>
Element <a> (kotwica) tworzy hiperłącza. Atrybut href określa docelowy adres URL. Tekst odnośnika powinien opisywać miejsce docelowe — nigdy nie pisz „kliknij tutaj”.
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>Uwaga dotycząca bezpieczeństwa target=_blank
Podczas otwierania odnośników w nowej karcie za pomocą target="_blank" zawsze dodawaj rel="noopener noreferrer". Bez tego otwarta strona może uzyskać dostęp do obiektu window strony, która ją otworzyła — jest to luka w zabezpieczeniach nazywana reverse tabnapping.
Listy nieuporządkowane: <ul>
Używaj elementu <ul> (listy nieuporządkowanej), gdy kolejność elementów nie ma znaczenia — na przykład w przypadku cech, składników lub odnośników nawigacyjnych. Każdy element to <li>. Przeglądarka domyślnie wyświetla punktory, ale niemal zawsze formatuje się je za pomocą CSS.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Listy uporządkowane: <ol>
Używaj elementu <ol> (listy uporządkowanej), gdy kolejność ma znaczenie — na przykład w przypadku kroków samouczka, rankingów lub instrukcji. Elementy są automatycznie numerowane. Używaj atrybutów start i reversed, aby sterować numeracją.
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>Listy opisowe: <dl>
Element <dl> (lista opisowa) grupuje terminy oraz ich definicje lub opisy. Używaj go w glosariuszach, metadanych (autor/data) i parach klucz–wartość. Element <dt> zawiera termin, a <dd> — opis.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>Zagnieżdżanie list
Listy można zagnieżdżać, aby odwzorować hierarchie. Umieść podrzędny element <ul> lub <ol> wewnątrz nadrzędnego elementu <li>. Nie zagnieżdżaj list wyłącznie po to, aby uzyskać wcięcie — zamiast tego użyj CSS.
Szybki test
Który atrybut zawiera tekstowy opis obrazu dla czytników ekranu?
Podsumowanie: tekst, obrazy, odnośniki i listy
Używaj elementów nagłówków do tworzenia struktury dokumentu, elementu p do akapitów, elementu img z odpowiednim tekstem alternatywnym do obrazów, elementu a z opisowym tekstem odnośnika do nawigacji oraz elementów ul/ol/dl do treści w formie list. Semantyka sprawia, że HTML jest dostępny i czytelny maszynowo.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Tekst, obrazy, odnośniki i listy” jest bezpłatna?
Tak — pełny tekst „Tekst, obrazy, odnośniki i listy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Tekst, obrazy, odnośniki i listy”?
Formatuj tekst za pomocą nagłówków i akapitów, osadzaj obrazy z tekstem alt, twórz hiperłącza oraz buduj listy uporządkowane i nieuporządkowane. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Tekst, obrazy, odnośniki i listy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Struktura dokumentu: DOCTYPE html head body
- Znaczniki semantyczne: header nav main article footer
- Tekst, obrazy, odnośniki i listy
- Formularze: input label button