W poprzednim artykule omówiliśmy podstawy HTML, teraz przyszedł czas na bardziej zaawansowane zagadnienia związane z formatowaniem tekstu i dodawaniem linków do strony internetowej. Jeżeli jeszcze go nie przeczytałeś, kliknij👉 tutaj, aby poznać tagi, które umożliwią nam nadanie treści estetycznego wyglądu i ułatwią nawigację po witrynie.
Formatowanie Tekstu
HTML oferuje szereg tagów służących do formatowania tekstu. Dzięki nim możemy nadawać tekstowi różne style, takie jak pogrubienie, kursywa czy podkreślenie.
Pogrubienie i Kursywa
Aby nadać tekstowi pogrubienie, używamy tagu <strong> lub <b>. Oba te tagi mają ten sam efekt, ale <strong> jest bardziej semantyczny i zazwyczaj jest zalecany do używania.
<p>To jest <strong>pogrubiony</strong> tekst.</p>
lub
<p>To jest <b>pogrubiony</b> tekst.</p>Do nadawania kursywy tekstu używamy tagu <em> lub <i>. Podobnie jak w przypadku pogrubienia, <em> jest bardziej semantyczny, więc zaleca się jego stosowanie.
<p>To jest <em>tekst kursywą</em>.</p>
lub
<p>To jest <i>tekst kursywą</i>.</p>Warto zauważyć, że używanie semantycznych tagów (<strong>, <em>) jest preferowane w HTML, ponieważ przyczynia się to do zwiększenia zrozumiałości struktury dokumentu przez maszyny i inne oprogramowanie analizujące treść. Jednak w praktyce oba zestawy tagów (<strong>, <b>) i (<em>, <i>) działają w podobny sposób w kwestii wyglądu i formatowania tekstu.
Podkreślenie
Aby nadać tekstu podkreślenie w HTML, używamy tagu <u>. Poniżej znajdziesz przykład.
<p>Możemy również <u>podkreślić tekst</u>.</p>
Tag <u> jest stosunkowo prosty i działa poprzez dodanie linii pod tekstem, co jest tradycyjną formą oznaczania podkreślenia w tekście. Warto jednak zauważyć, że stylowe podkreślenie tekstu jest rzadko stosowane w nowoczesnym projektowaniu stron internetowych, ze względu na to, że może to wprowadzać niejednolitość w prezentacji i być mylące, szczególnie gdy podkreślenie jest używane również do oznaczania hiperłączy (<a>).
W przypadku hiperłączy, przeglądarki domyślnie nadają im podkreślenie. Dlatego, jeśli chcesz zmienić styl podkreślenia dla hiperłączy, lepiej jest to zrobić za pomocą arkuszy stylów CSS.
Przekreślenie
Aby przekreślić tekst w HTML, używamy tagu <s> (strikethrough). Poniżej znajduje się przykład.
<p>Czasami przydaje się <s>przekreślić pewne słowa</s>.</p>
Tag <s> oznacza, że tekst znajdujący się wewnątrz tego tagu zostanie przekreślony. Stosowanie przekreślenia może być używane na różne sposoby, takie jak oznaczanie tekstu, który nie jest aktualny lub jest skreślony, ale nadal jest obecny dla celów informacyjnych.
Podobnie jak w przypadku podkreślenia, stylowe przekreślenie tekstu nie jest powszechnie używane w nowoczesnym projektowaniu stron internetowych. Jeśli chcesz dostosować wygląd przekreślenia (np. zmienić jego kolor czy grubość), zaleca się używanie arkuszy stylów CSS.
Dodawanie linków do strony internetowej w HTML odbywa się za pomocą tagu <a> (ang. anchor). Poniżej przedstawiam przykłady różnych rodzajów linków:
Link do Innej Strony
Aby utworzyć link do innej strony, używamy atrybutu href i wpisujemy adres URL strony, do której chcemy przekierować użytkownika.
<a href="https://www.przyklad.pl">Odwiedź stronę główną</a>
Link do Innej Strony z Nowym Oknem
Jeżeli chcemy, aby link otwierał nowe okno przeglądarki, możemy skorzystać z atrybutu target z wartością _blank.
<a href="https://www.przyklad.pl" target="_blank">Otwórz w nowym oknie</a>Link do Innej Strony w Danej Sekcji
Aby umożliwić przeniesienie użytkownika do konkretnej sekcji na stronie (np. za pomocą odnośnika do identyfikatora sekcji), możemy użyć atrybutu href z nazwą identyfikatora.
<a href="#sekcja2">Przejdź do Sekcji 2</a>W tym przypadku, istnieje sekcja o identyfikatorze sekcja2 na stronie, do której użytkownik zostanie przewinięty po kliknięciu linku.
Formatowanie Linków
Zmiana Koloru Linku
Możemy również dostosować wygląd linku, na przykład zmieniając jego kolor, za pomocą atrybutu style.
<a href="https://www.przyklad.pl" style="color: blue;">Odwiedź stronę</a>
Podkreślenie Tekstu Linku Po Najechaniu Myszką
Za pomocą arkusza stylów CSS możemy dostosować zachowanie linku, na przykład dodając podkreślenie tekstu po najechaniu myszką.
<style>
a:hover {
text-decoration: underline;
}
</style>
<a href="https://www.przyklad.pl">Odwiedź stronę</a>W powyższym przykładzie, po najechaniu myszką na link, pojawi się podkreślenie tekstu. To jest jedno z wielu dostępnych dostosowań stylów linków za pomocą CSS.
