Wstęp

W tej lekcji zajmiemy się cytatami oraz skrótami. Co prawda cytaty możemy tworzyć po prostu poprzez umieszczenie tekstu w apostrofach “Cytat”, jednak istnieją lepsze sposoby aby to zrobić. W tej lekcji dowiesz się jak tworzyć cytaty oraz skróty przy pomocy odpowiednich tagów HTML, przekonasz się również jakie są ich zalety.

Krótkie cytaty

Zawartość stron internetowych tworzy najczęściej tekst, a jak wiadomo w tekście często znajdują się różnego rodzaju cytaty. Jak wiesz cytaty możemy tworzyć przy pomocy apostrofów “cytat”. Jednak tworząc stronę w HTML lepiej użyć do tego celu znacznikaq. Nazwaq_to skrót od_quotation_czyli po prostu_cytat. Elementuqużywamy do tworzenia krótkich cytatów znajdujących się w tekście, czyli najczęściej będziemy go używać wewnątrzp.

Uruchom przykład

Jeśli uruchomisz powyższy przykład, to zauważysz, że fragment będący zawartością znacznikaq, zostaje wyświetlony jako tekst pomiędzy apostrofami.

Dzięki temu, że używamy taguqzamiast cudzysłowu, będziemy mogli w przyszłości wygodnie zmieniać wygląd wszystkich cytatów. Stanie się to możliwe dzięki stylom CSS, którymi się jeszcze nie zajmowaliśmy. Tagqjest też informacją dla przeglądarki o tym, że dany fragment jest cytatem, a nie tylko tekstem pomiędzy apostrofami. Jest to istotne chociażby z punktu widzenia różnego rodzaju oprogramowania umożliwiającego korzystanie ze stron www osobom niewidomym.

Elementqposiada opcjonalny atrybutcite, który określa źródło cytatu. Zawartość tego atrybutu nie jest wyświetlana w standardowych przeglądarkach internetowych, jednak różnego rodzaju alternatywne oprogramowanie i czytniki mogą z niego korzystać.

Zadanie 1

Zastąp apostrofy tworzące cytat, elementem służącym do tworzenia cytatów, poznanym w tej części lekcji. Zawartość cytatu nie powinna ulec zmianie.

Zadanie zaliczone

Długie cytaty

Czasami chcemy na naszej stronie umieścić dłuższy cytat zajmujący na przykład cały akapit. Można to oczywiście zrobić przy pomocy taguq, jednak w takiej sytuacji lepiej użyć elementublockquote, tworzącego sekcję zawierającą cytat.

Uruchom przykład

Uruchom powyższy przykład, aby przekonać się jak wygląda zawartość tagublockquotew przeglądarce.

Elementublockquotemożemy również użyć wraz z atrybutemciteokreślającym źródło cytatu.

Zadanie 2

Poszukaj w internecie jakiegoś ciekawego przykładu. Następnie utwórz na stronie długi cytat i podaj jego źródło korzystając z odpowiedniego atrybutu

Rozwiąż zadanie

Element cite

Kolejnym elementem służącym do pewnego rodzaju cytatów jestcite. Element ten przeszedł sporo zmian. W poprzednich wersjach HTML miał wiele różnych zastosowań związanych z umieszczeniem na naszej stronie zawartości z innych źródeł. Aktualnie, w HTML5, powinniśmy go używać do określenia tytułu jakieś pracy. Może to być tytuł książki, obrazu, filmu itp.

Zawartość elementucitejest wyświetlana kursywą, aby przekonać się jak dokładnie wygląda taki element uruchom poniższy przykład.

Uruchom przykład

Skróty

Dzięki tagowiabbrmożemy wygodnie tworzyć skróty w tekście. Sposób jego użycia wygląda następująco: tworzymy znacznikabbr, następnie pomiędzy<abbr>a</abbr>wpisujemy skrót, który ma być widoczny w tekście. Należy również wykorzystać atrybuttitle, którego wartość jest rozwinięciem skrótu. Gdy użytkownik najedzie myszką na skrót, to zostanie wyświetlone małe pole zawierające jego pełne rozwinięcie, czyli wartość, którą przekazaliśmy do atrybututitle.

Uruchom przykład

Użycie elementuabbrjest pomocne nie tylko dla użytkowników, pomaga również wyszukiwarkom internetowym lepiej analizować Twoją stronę.

Zadanie 3

Utwórz akapit zawierający skrót “ONZ”, wraz z jego rozwinięciem którym jest “Organizacja Narodów Zjednoczonych”.

Rozwiąż zadanie

Podsumowanie

Ta lekcja była trochę krótsza niż poprzednie, przypomnijmy jednak, czego mogłeś się nauczyć. Na początek miałeś okazję poznać znacznikqsłużący do tworzenia krótkich cytatów umieszczanych w tekście. Następnie zajęliśmy się tworzeniem dłuższych cytatów przy pomocy elementublockquote. Kolejną część poświęciliśmy elementowicite, który w aktualnej wersji HTML służy do określenia tytułów różnego rodzaju prac i dzieł. Na koniec zajęliśmy się skrótami, które można tworzyć przy pomocy elementówabbr.

Na koniec tej lekcji należy Ci się jeszcze krótkie wyjaśnienie dotyczące tagów formatujących tekst. W jednej z poprzednich lekcji miałeś okazję poznać tagi, które powodowały wyświetlanie tekstu kursywą, tym razem poznałeś tagcite, który również powoduje taki sam efekt, jednak powinniśmy go używać w innych, określonych w tej lekcji, sytuacjach. Prawda jest taka, że wielu twórców stron internetowych nie bardzo się tym przejmuje i najczęściej tylko formatuje tekst przy pomocy stylów CSS. To od Ciebie zależy, czy w przyszłości będziesz się stosował do wszystkich zaleceń, zachęcamy Cię, żebyś to robił.

Warto jeszcze dodać, że w tym kursie nie zostały umieszczone wszystkie tagi HTML, tylko te, które uważamy za przydatne i z których warto korzystać.