Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
W jaki sposób można ustawić w CSS wygląd hiperłącza, aby linki nieodwiedzone miały kolor żółty, a odwiedzone kolor zielony?
Odpowiedzi
Informacja zwrotna
Aby zdefiniować w języku CSS formatowanie hiperłączy, które różnią się kolorem w zależności od ich stanu (odwiedzone lub nieodwiedzone), należy zastosować odpowiednie selektory CSS. W standardzie CSS wyróżniamy kilka pseudo-klas, które pozwalają na stylizację linków: :link, :visited, :hover, oraz :active. Pseudo-klasa :link odnosi się do linków, które jeszcze nie zostały odwiedzone przez użytkownika, a jej stylizację możemy zdefiniować za pomocą a:link {color: yellow;}. Z kolei pseudo-klasa :visited odnosi się do linków, które zostały już odwiedzone, a ich kolor możemy ustawić jako zielony, co realizuje reguła a:visited {color: green;}. W ten sposób, gdy użytkownik przegląda stronę, linki, które jeszcze nie były klikane, będą wyświetlane w kolorze żółtym, natomiast te, które zostały odwiedzone, zmienią swój kolor na zielony. To podejście jest zgodne z zasadami dostępności i użyteczności w Internecie, a także spełnia wymagania WCAG (Web Content Accessibility Guidelines), które zachęcają do jasnego oznaczania stanu linków. Przykład zastosowania CSS w pliku stylów może wyglądać następująco: .linki {text-decoration: none;} a:link {color: yellow;} a:visited {color: green;}. Takie podejście pozwala na intuicyjne odczytanie stanu linku przez użytkowników, co zwiększa komfort korzystania z serwisów internetowych.
Wszystkie niepoprawne odpowiedzi zawierają błędne przypisania kolorów do poszczególnych stanów hiperłączy. Przede wszystkim, nieodwiedzone linki powinny być w kolorze żółtym, a odwiedzone w kolorze zielonym. W pierwszym przypadku podano kolor żółty dla stanu visited, co jest niezgodne z oczekiwaniami użytkowników i standardami projektowania. Użytkownicy mogą być zdezorientowani, gdy odwiedzone linki nie różnią się wizualnie od tych, które są jeszcze nieodwiedzone. Ponadto, inne odpowiedzi sugerują użycie :hover zamiast :link. Pseudo-klasa :hover odnosi się do linków, gdy użytkownik najeżdża na nie kursorem, a nie do stanu odwiedzonego. To może prowadzić do sytuacji, w której kolor linku zmienia się w czasie interakcji, a nie na podstawie historii przeglądania, co jest niezgodne z zamierzonym celem. Niewłaściwe stylizowanie linków może również wpływać na dostępność strony, ponieważ użytkownicy oczekują, że kolor linków będzie wskazywał, czy dany link był już klikany. Z punktu widzenia standardów CSS oraz najlepszych praktyk programowania, ważne jest, aby zachować spójność i intuicyjność w stylizacji, a także unikać mylących kolorów i efektów, które mogą zaburzać doświadczenia użytkowników.