Przejdź do głównej treści
  1. Strona główna
  2. Technik informatyk
  3. INF.03
  4. Pytanie

Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Zawód: Technik informatyk, Technik programista

Kategorie: Tworzenie stron WWW Systemy CMS i narzędzia webowe

Który z zaprezentowanych kodów HTML sformatuje tekst zgodnie z podanym wzorem?
Uwaga: słowo "stacji" jest napisane większą czcionką niż pozostałe wyrazy w tej linijce)

Lokomotywa

Stoi na stacji lokomotywa ...

Wybrany kod jest poprawny, bo zachowuje prawidłową strukturę dokumentu HTML i dokładnie obejmuje znacznikiem <big> tylko słowo stacji. Nagłówek <h1>Lokomotywa</h1> tworzy główny tytuł strony lub fragmentu treści, a potem akapit <p> zawiera zdanie: Stoi na <big>stacji</big> lokomotywa .... Dzięki temu tylko wyraz stacji zostanie pokazany większą czcionką, a pozostała część tekstu w akapicie wróci do normalnego rozmiaru po zamknięciu </big>. To jest ważne, bo HTML działa przez zagnieżdżanie elementów i przeglądarka interpretuje zakres formatowania od znacznika otwierającego do odpowiadającego mu znacznika zamykającego. Z mojego doświadczenia najlepiej zawsze sprawdzać pary znaczników: <h1> z </h1>, <p> z </p>, <big> z </big>. W praktycznych projektach warto też pamiętać, że <big> jest znacznikiem przestarzałym w HTML5. Na prawdziwej stronie lepiej użyć CSS, na przykład <span class="wiekszy">stacji</span> i reguły .wiekszy { font-size: 1.2em; }. Jednak w kontekście tego zadania odpowiedź numer 2 najlepiej odtwarza podany wzór i jest składniowo najbardziej sensowna.
Niepoprawne warianty wynikają głównie z problemów z domykaniem znaczników i myleniem znaczenia elementów HTML. W HTML bardzo ważne jest, żeby element otwarty został zamknięty właściwym znacznikiem, najlepiej w odwrotnej kolejności do zagnieżdżania. Jeśli tekst zaczyna się od <big>stacji, ale nie pojawia się </big> zaraz po słowie stacji, to przeglądarka może powiększyć także dalszą część zdania, na przykład lokomotywa ..., albo spróbuje sama naprawić kod. Taka automatyczna naprawa bywa różna zależnie od przeglądarki, więc nie jest dobrą praktyką zawodową. Kod powinien być jednoznaczny i przechodzić walidację, np. w walidatorze W3C.

Błędem jest też zamknięcie nagłówka <h1> znacznikiem </p>. To miesza dwa różne elementy: nagłówek i akapit. <h1> służy do oznaczenia najważniejszego nagłówka na stronie, a <p> do zwykłego akapitu tekstu. Taki zapis tworzy niepoprawną strukturę DOM i może zepsuć wygląd, dostępność oraz późniejsze stylowanie CSS. Jeszcze inny problem to użycie <small> dla tytułu Lokomotywa. Ten znacznik zmniejsza tekst i w dodatku nie nadaje mu semantyki nagłówka, więc nie odpowiada wzorowi, gdzie tytuł ma być nagłówkiem pierwszego poziomu. Częsty błąd myślowy polega na patrzeniu tylko na to, czy coś „mniej więcej wygląda”, a nie na to, czy kod ma poprawną składnię i logiczną strukturę. Moim zdaniem to właśnie te drobne domknięcia znaczników najbardziej odróżniają przypadkowe pisanie HTML od solidnego tworzenia strony.

Wymagane logowanie

Ocenianie trudności pytań jest dostępne tylko dla zalogowanych użytkowników. Zaloguj się, aby skorzystać z pełni możliwości platformy.

Twoja ocena pomoże innym uczniom w przygotowaniu do egzaminu, a Tobie pozwoli na dostęp do spersonalizowanych statystyk.

Zgłoś błąd w pytaniu

Rozwiń sekcję i zmień pole, którego dotyczy błąd. Wyślemy tylko zmienione sekcje.

Błędna kwalifikacja
Błąd w treści pytania
Błąd w treści odpowiedzi
Błąd w obrazie
Dane kontaktowe (opcjonalnie)
Podaj email, jeśli chcesz otrzymać informację o rozpatrzeniu zgłoszenia.