HTML dla zaawansowanych: jak stworzyć tekst w odpowiednim formacie

„Proszę użyć pogrubienia, aby uwidocznić istotne informacje w tekście“ – na pewno spotkaliście się z takim wymaganiem w niejednym opisie zlecenia naszych klientów. Chociaż podstawowe Tagi HTML nie są niczym nowym dla większości autorów Textbrokera, te bardziej skomplikowane mogą niekiedy przyprawić o zawrót głowy. Co to jest „h2” albo Tag „br”? Ten tutorial powstał w odpowiedzi na najczęściej zadawane przez Was pytania. 

HTML – co to w ogóle jest?

HTML oznacza „Hypertext Markup Language“ i jest to nic innego jak spójne formatowanie tekstów – przede wszystkim w sieci. Jeśli napiszecie artykuł w danym edytorze tekstów, może się okazać, że inny program będzie miał problemy z odczytaniem jego struktury, ponieważ po prostu nie rozpozna pierwotnego formatu. Aby temu zapobiec, stworzono spójne formatowanie, które jest domyślnym „językiem” znaków, wspólnym dla całego Internetu.

Do czego służą te wszystkie „Tagi“?

To, jak ważne jest formatowanie tekstów, pokażemy Wam na kilku krótkich przykładach. Wyobrażaliście sobie kiedyś, że otwieracie poranną gazetę, a Waszym oczom ukazuje się jeden blok tekstu? Nie ma podtytułów, akapitów, tabelek ani nawet zdjęć czy innej grafiki. Prawdopodobnie nie przeczytalibyście nawet pierwszej strony.

W Internecie, gdzie uwaga użytkowników jest dużo mniejsza od uwagi czytelników tradycyjnych gazet, formatowanie nabiera szczególnego znaczenia. Internauta powinien bardzo szybko zorientować się, czy na danej stronie znajdzie informacje, których szuka. W konsekwencji, formatowanie odgrywa coraz ważniejszą rolę także dla wyszukiwarek. Tekst, w którym znajdują się podtytuły w różnych rozmiarach oraz oddzielone akapity, i w którym nie brak tabel oraz wypunktowań najważniejszych kwestii, ma większe szanse na zajęcie wyższej pozycji w wynikach wyszukiwania Google’a.

Nasi klienci doskonale zdają sobie z tego sprawę i dlatego coraz częściej wymagają formatowania HTML. Aby ułatwić Wam pracę, przedstawimy najważniejsze tagi, które mogą Wam się przydać w codziennej pracy.  

Podtytuły

Podtytuły pomagają podzielić tekst na podtematy i mogą mieć różne rozmiary.

Poza zwykłymi tagami <h1>, <h2> i <h3> istnieją także tagi od <h4> do <h6> – wykorzystuje się je jednak jedynie w przypadku bardzo długich tekstów.

Akapity

Istnieją dwa tagi, które pozwalają na oddzielenie akapitów: tag <br> oraz tag <p>.

Przy pomocy tagu <p> możesz oddzielić akapit od wcześniejszego i kolejnego. Dzięki tagowi <br> „przeskakujecie“ natomiast do kolejnego wersu, zupełnie jak w edytorze tekstu przy użyciu klawisza Enter. Pozwala to na bardziej elastyczną konstrukcję tekstu. Możecie też oddzielić od siebie np. dwa główne akapity lub po dłuższej części tekstu pozostawić kilka wolnych linii. Ważne: Wyszukiwarki internetowe mają czasami problem z rozpoznaniem tagu <br>, dlatego  większość zleceniodawców prosi o użycie <p>.

Zauważcie, że nie trzeba otwierać tagu <br>. Wystarczy wstawić go na końcu wersu, by przejść do kolejnej linii.  

Wyróżnienie: pogrubienie, kursywa, podkreślenie

Czasami zleceniodawca prosi o wyróżnienie pewnych informacji za pomocą pogrubienia, kursywy lub podkreślenia – wszystko po to, by czytelnik mógł „zeskanować” tekst wzrokiem i zrozumieć, o czym mówią poszczególne akapity.

Z reguły tagi <strong> oraz <b>, <em> i <i>, a także <ins> oraz <u> zostaną zinterpretowane przez wyszukiwarkę  w takim sam sposób. Uwaga: W niektórych przypadkach wcale nie jest to jednak takie pewne! Używajcie więc zawsze tagów, o które prosi klient, i nie zamieniajcie np. <strong> z <b>.

Linki

Czasami zleceniodawcy proszą o umieszczenie w tekście odnośnika (linka) do innej podstrony lub do strony zewnętrznej. Jak to zrobić?

Zauważcie, że w przypadku linkowania zawsze należy użyć znaku ("). Wyszukiwarka nie rozpozna zwykłego cudzysłowu i link po prostu nie zadziała.

Wypunktowanie

Poza samą treścią, w tekście ważną rolę odgrywają także wypunktowania. Czasami warto „rozbić” artykuł, by podsumować i wyróżnić najważniejsze informacje. Istnieją dwa rodzaje list – wypunktowanie oraz numerowanie. Zazwyczaj nasi zleceniodawcy proszę o pierwszy rodzaj, ale zdarza się też, ze zależy im na zastosowaniu drugiego. Zwróćcie na to uwagę.

Jak łączyć tagi?

Bywa, że zleceniodawca prosi o połączenie kilku tagów. Czy link może zostać wyróżniony kursywą? Oczywiście, że tak! Musicie jednak pamiętać, by najpierw zamknąć ostatnio otwarty tag. Nie zapominajcie także o prawidłowej kolejności, np.: <a href="textbroker.de"><i>Textbroker</i></a>.

Jak sprawdzić, czy tagi HTML są poprawne

Jeśli klient prosi o rozbudowane formatowanie HTML, może się zdarzyć, że pominiecie jakiś cudzysłów czy ukośnik. Przeoczenie nawet najmniejszego szczegółu sprawi, że tagi nie zadziałają, a Wasz wysiłek pójdzie na marne. Warto więc przed oddaniem tekstu sprawdzić, czy wszystko działa. Nasz system sprawdza Wasze teksty i podpowiada, gdzie popełniliście błąd.

Możecie też jednak sami pokusić się o weryfikację gotowego tekstu. W tym celu użyjcie specjalnego narzędzia, np. HTML-Testbed. Wystarczy, że skopiujecie tekst do pola tekstowego. Wyświetli się on w formie, w jakiej będzie widoczny w przeglądarce. Jeśli tekst wygląda dziwnie, to znaczy, że prawdopodobnie źle zastosowaliście któryś z tagów. Skorzystanie  z tej opcji nie jest czasochłonne i naprawdę ułatwia pracę.  

Mamy nadzieję, że dzięki temu tutorialowi zrozumieliście „język Internetu”. Jeśli chcecie dowiedzieć się czegoś więcej o tagowaniu HTML, możecie odwiedzić stronę kurs HTML. Znajdziecie na niej – poza innymi cennymi informacjami – opisy wielu tagów. Jeśli znacie język angielski, możecie też zajrzeć na W3Schools, gdzie uzupełnicie wiedzę. Powodzenia!