Polski frontend

Wiemy już jak napisać naszą strukturę strony, jednak to czego nam brakuje, to jej treść. I tak samo jak bloki tworzące nam układ całej strony, również to, co na niej umieścimy, musi się znaleźć w odpowiednich znacznikach. Znaczników istnieje dość sporo, ale jak już wcześniej wspomniałam, może być i tak, że któregoś z nich nigdy nie użyjecie. Dlatego też przedstawimy Wam podstawowe znaczniki HTML oraz parę uwag i ciekawostek, jak poprawnie z nich korzystać i nie robić błędów 🙂 .   Atrybuty Zanim jednak przejdziemy do konkretnych tagów, to trzeba wspomnieć, że znaczniki HTML mogą posiadać atrybuty. Atrybuty dostarczają dodatkowej informacji o elemencie lub dostosowują jego zachowanie na różne sposoby, tj. takie, jakie mu zdefiniujemy. Składają się one z nazwy oraz wartości. Wyróżniamy atrybuty globalne – mogą być dodawane do każdego ze znaczników, ale na niektóre z nich nie będą miały żadnego wpływu lub dedykowane wyłącznie konkretnemu elementowi. Do tych pierwszych należą np. powszechne class i id, ale również mniej znane translate. Translate sprawdzi nam się w przypadkach, gdy nie chcemy, żeby pewna treść, np. nazwa naszej firmy, bloga, itp. nie została przetłumaczona przez automatyczny translator po wykryciu obcego języka. Natomiast do tej drugiej grupy należą, np. alt, type. Jak umieścić tekst w HTML? Prawdopodobnie najważniejszym tagiem, w który można wstawić tekst są nagłówki: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> . Czemu najważniejsze? Bo tego typu znaczniki HTML tworzą nam spis treści, a tym samym pomagają w odnalezieniu odpowiedniej treści na danej stronie. via GIPHY   I nie bez podstawy mają one numerację 1-6, ponieważ oznacza ona hierarchię ważności i zawartości naszej treści. Główny tytuł oznaczony <h1> będzie tylko jeden na danej stronie, następnie powinny wystąpić nagłówki poziomu h2, później h3 itd. Nigdy nie powinno być tak, że po h1 damy, np. h5, bo pasował nam rozmiarem. Pomijając h2 – h4, stworzymy lukę w naszym spisie streści na stronie, a to może tylko doprowadzić do dezorientacji użytkownika. Pamiętajcie, że o rozmiar możemy sobie kontrolować CSS-em i numer przy nagłówku wcale nie odnosi się do rozmiaru naszego tekstu.   See the Pen Headings by frontowisko (@frontowisko) on CodePen.   Zwykły tekst możemy umieścić w <p> – paragraph, który odpowiada nam za stworzenie nowego akapitu. Znacznik ten używany jest również w elemencie <blockquote> i służy do tworzenia całego bloku z cytatem. I w przeciwieństwie do <q> najczęściej używany jest przy dłuższych treściach.  To jest przykład <blockquote>, którego treść posiada wcięcie tekstu. To jest przykład zwykłego <q> . Przeglądarki ten element umieszczają automatycznie w cudzysłów.    Element <blockquote> może zawierać atrybut cite, pozwalający określić źródło cytatu. Jednakże <cite> to również odrębny znacznik, który jest używany, aby odwołać się do jakiejś pracy o podłożu kreatywnym, np. książka, obraz, piosenka i zawiera w sobie tytuł tego dzieła. Hiperłącza Łącza w HTML tworzy się za pomocą elementu <a> – anchor, który z atrybutem href linkuje do: strony www, jakiegoś id na naszej stronie (kotwica), pliku, adresu email. Treść pomiędzy znacznikami powinna wskazywać na to, do czego linkujemy. Element <a> oprócz najbardziej powszechnego href, może posiadać również atrybut target. Wskazuje on, czy stronę otwieramy, np. w nowej karcie, czy zastępując tą, na której obecnie się znajdujemy (domyślne działanie). Oprócz tego, przydatny może okazać się atrybut download do pobierania zalinkowanych plików. I tutaj prawdziwą korzyścią jest to, że będzie działać z MIME type, które odpowiadają różnym mediom, a tym samym możemy również przekazywać pdfy, czy muzykę. Przykłady: Link do naszego facebooka 😎 Link do pobrania logo   Listy Język HTML udostępnia nam trzy rodzaje list: uporządkowane, czyli takie, którego elementy mają numerację, nieuporządkowane, której elementy są oznaczone jakimiś znakiem, przykładem jest ta lista 😉 , definicji, która składa się ze zbioru terminów i opisów do nich. Z czego tak naprawdę dwie pierwsze są zazwyczaj używane. Lista uporządkowana przyda Was się, np. chcąc napisać przepis, czy wskazówki na trasie. Wtedy poszczególne elementy listy <li> – list item, będą mówiły, co po kolei należy wykonać. Natomiast lista nieuporządkowana ma za zadanie jedynie zgrupować poszczególne elementy, których kolejność na liście nie ma żadnego znaczenia. Dla list mamy znaczniki:  <ol> – ordered list lub  <ul> – unordered list, logiczne, prawda? 😀 Listy definicji – <dl> – description list, różni się od pozostałych tym, że jej elementami nie są <li>. Zawiera ona termin <dt> – description term oraz jego opis <dd> – description details, a tutaj przykładziki:   Element ul Kolejny element ul I jeszcze jeden element ul Pierwszy element ol Drugi element ol Trzeci element ol HTML ang. Hypertext Markup Language – hipertekstowy język znaczników, wykorzystywany do tworzenia struktury strony i jej zawartości.   Pozostały nam tak naprawdę dwie ważne kategorie, jeśli chodzi o znaczniki HTML – formularze, którymi zajmiemy się kiedyś w osobnym wpisie i coś bez czego internet nie byłby internetem 😀 dum dum dum via GIPHY   Media! 📸 🎥 🎶 Mówiąc o mediach mamy tu na myśli wszelkie zdjęcia, gify, video, youtuby, muzykę itd.. I tak samo, jak mamy wiele typów mediów, tak samo HTML umożliwia nam ich wstawienie w różne znaczniki.   Obrazy Obrazy w HTML umieszczamy w tagu <img> , który posiada atrybut src, gdzie podajemy źródło wskazujące na lokalizację tego obrazu, a także alt. O alt już wspomniałyśmy trochę przy okazji dostępności. Otóż atrybut alt powinien opisywać, co się dzieje na danym obrazku. Jest to ważne zarówno dla osoby niepełnosprawnej, a także w przypadku, gdy dany obrazek się nie wczyta na stronie. Wtedy opis tam umieszczony, będzie stanowił główną informację, tzw. tekst alternatywny. I tu uwaga, jeśli obrazek jest stricte dekoracyjny i nie ma żadnego znaczenia dla strony, wtedy również umieszcza się atrybut alt, ale zostawia się go pusty!   Najpopularniejszymi formatami, które można wstawić w <img>, są: png, jpg, gif oraz svg. I jeśli mamy tu na pokładzie jakichś grafików, to widzą oni, że svg to format dla grafiki wektorowej, który powstał z myślą do wykorzystania na stronach internetowych. Pomyślicie sobie „jak to, to zwykły obrazek nie wystarcza?”. Czasem nie 😀 . SVG to skrót od Scalable Vector Graphics i jak sama nazwa mówi, plusem jej jest to, że w odróżnieniu od reszty formatów nie dojdzie do efektu „pikselozy”, ze względu na możliwości skalowania. Niezwykle przydatne dla różnego typu ikon, ale też różnych kształtów, jak fale, kwadraty itp. Należy jednak pamiętać, że wstawiając plik z rozszerzeniem svg bezpośrednio w src tagu <img>, tracimy możliwość pełnej kontroli naszego svg. Format SVG umożliwia frontend developerowi, np. dowolną zmianę kolorów w obrębie danego kształtu. Stąd najczęściej obrazki tego typu formatu wstawiamy bezpośrednio w kod – jako element <svg>.  Jeśli same chcecie się przekonać, jak to właściwie wygląda, to zapraszam do zabawy i stworzenia swojego własnego obrazka za pomocą: https://getwaves.io/ .   …więcej obrazów Tag img spotkamy również w dwóch innych tagach, tj. <picture> i <figure>. O znaczniku <picture> mogłaś już przeczytać w poprzednim wpisie o błędach w HTML, gdzie był zestawiony z samym tagiem img. I tak jak już było powiedziane wykorzystujemy go, np. kiedy chcemy przyspieszyć załadowanie się obrazka, poprzez wczytanie najbardziej odpowiedniego dla danego urządzenia. Dajmy na to – mamy obrazek o rozdzielczości 4000×3000, który waży 5MB. Nie jest to coś, co chętnie byśmy wyświetlali na urządzeniach mobilnych. Stąd wstawiamy do tagu <picture> elementy <source>, z tym samym obrazkiem, ale w innych rozmiarach czy innej gęstości (retina). Dzięki zdefiniowanym szerokościom, przeglądarka sama wybierze odpowiedni source do załadowania. Natomiast img będzie nam zawsze służył za obrazek „awaryjny”, w przypadku braku wsparcia przeglądarki (pozdrawiamy Internet Explorer 😉 ).   Znacznik <figure> reprezentuje niezależną treść, często z opcjonalnym podpisem, który jest określony za pomocą elementu <figcaption>. Główną różnicą pomiędzy nim, a tagiem img, to właśnie to, że może istnieć samodzielnie od reszty treści. Obrazek jak i podpis w nim zawarty ma nawiązywać do głównej treści strony, ale jego przeniesienie w inne miejsce, nie powinno jakkolwiek wpłynąć na cały dokument. Dodatkowo figure nie musi zawierać tylko img. Ma on za zadanie niejako segregować treść, dlatego też oprócz obrazków mogą się w nim znaleźć fragmentu kodu, wiersze, diagramy, wykresy itp.   Filmy W zależności, gdzie osadzony jest film wykorzystujemy tag <iframe> bądź <video>. Gdy film, który chcemy użyć, trzymany jest (hostowany) na platformach takich jak youtube, czy vimeo, wtedy musi on zostać osadzony na naszej stronie za pomocą znacznika iframe. Tak naprawdę, tag ten nie jest odpowiedzialny za odtwarzanie filmu, a jedynie z załadowanie url z innego źródła. Natomiast video pozwala przeglądarce na odtwarzanie filmu natywnie i daje nam nad nim pełną kontrolę, dzięki różnym atrybutom i zdarzeniom (eventom).   Muzyka Do wstawienia muzyki używa się tagu <audio>. Tak samo jako video, umożliwia on kontrolę nad graną muzyką i również zawiera w sobie tag source, w którym podajemy źródło pliku wraz z jego typem.   Podsumowanie Z podstaw to by było na tyle!  Do tych tagów, jak i innych terminów, będziemy wracały w przyszłych wpisach nie raz, dlatego tak ważne będzie ich przyswojenie. Dzięki nim już jesteś w stanie napisać całą strukturę strony. I jasne, to tylko albo aż struktura strony, która bez CSS-a i JavaScripu nie będzie dobrze wyglądającą i funkcjonującą stroną, ale hej, nie od razu Rzym zbudowano 😀 . Również robiąc samą strukturę można popełnić mnóstwo błędów. via GIPHY   Wiele z nich wymieniłyśmy w naszym ebooku „25 najczęstszych błędów w HTML i CSS” , który wszystkim polecamy! Dla ciekawskich dorzucam też pełną listę znaczników HTML . Do następnego!

Artykuł Znaczniki HTML – czas na treść pochodzi z serwisu Frontowisko.