Mylić Kod HTML? Nie jesteś jedyny.
Przyznaję. Kiedy zacząłem pisać dla Internetu, wiedziałem o Zilchu Kod HTML. I przyznam to jeszcze raz. Nadal niewiele wiem.
Odkryłem jednak, że odrobina znajomości HTML może znacznie ułatwić pisanie w Internecie.
Jasne, nie wiem jak zbudować stronę internetową, ale wiem, jak ulepszyć małe komponenty, a kiedy mam do czynienia z systemem do edycji, który wymaga kodu HTML – na który prawdopodobnie również natraficie – wiem wystarczająco, aby poprawnie sformatować mój tekst.
Chcesz wyeliminować to zamieszanie i dowiedzieć się trochę o kodowaniu HTML? Zacznijmy.
Contents
Co to jest kod HTML?
Widziałeś to wokół, ale prawdopodobnie nie wiesz, co to wszystko bełkot HTML.
To znaczy Hipertekstowy język znaczników. HTML to ustandaryzowany system używany do formatowania dokumentów. Użyte kody – zwane znacznikami – mogą formatować czcionkę, rozmiar tekstu, kolor, hiperłącza, akapity i inne.
Przeglądarki internetowe czytają HTML i używają znaczników, aby określić sposób wyświetlania zawartości. Przykładem znacznika jest pogrubiony tekst, który wygląda następująco:
To jest pogrubiony tekst.
Na stronie wygląda to tak:
To jest pogrubiony tekst.
Przez lata istniało wiele wersji HTML, ale od października 2014 HTML5 jest znormalizowanym językiem znaczników w Internecie.
Dlaczego blogerzy powinni wiedzieć?
Chociaż możesz sobie z tym poradzić, nie znając HTMLa jako blogera i robiąc odrobinę oszukiwania – na przykład używając programu, który konwertuje formatowanie na język HTML – znajomość kilku podstawowych tagów może naprawdę pomóc w blogowaniu.
Oto niektóre sytuacje, w których osobiście uznałem to za przydatne:
- Podczas blogowania gości niektóre witryny chcą, aby Twoje biografia autora została napisana w formacie HTML. Przy odrobinie wiedzy możesz w razie potrzeby dodawać linki i kursywę.
- Kiedy coś wygląda nie tak, możesz spojrzeć na HTML na stronie i zobaczyć, co jest przyczyną problemu.
- W sieci online można używać tagów HTML do formatowania komentarzy do blogów i komentarzy na forum.
- Jeśli nauczysz się wystarczająco dużo o HTML, możesz zacząć uczyć się trochę o CSS i wprowadzać drobne poprawki w swojej witrynie bez zatrudniania projektanta.
Wspólne kody Korzystanie z blogerów
Zanim wskoczymy zbyt głęboko, wiedz, że tagi HTML to słowa kluczowe w nawiasach ostrych. Te tagi występują w parach, a tekst między tagiem początkowym i końcowym będzie miał wpływ. Znacznik końcowy jest zapisywany tak samo jak znacznik początkowy, ale używa znaku ukośnika przed nazwą znacznika.
Brzmi myląco? Łatwiej jest podać kilka przykładów. Rzućmy okiem na niektóre z popularnych tagów HTML, które powinieneś znać jako blogger.
Tagi szkieletowe
Najpierw są tagi szkieletowe. Te niekoniecznie będą używane, ale pomaga je poznać. Znaczniki te stanowią podstawę dokumentu, stąd termin „znaczniki szkieletowe”. Zostaną odczytane przez stronę internetową, ale nie zostaną przetłumaczone na elementy wizualne.
Mimo to dobrze wiedzieć. Na przykład, czy kiedykolwiek pracowałeś z programem, który prosi o wklejenie kodu w sekcji „head” na swojej stronie? Będziesz mógł to znaleźć przy odrobinie znajomości HTML. Oto kilka znaczników szkieletowych, które powinieneś wiedzieć:
- : W tej sekcji opisano dokument HTML.
- : Ta sekcja zawiera informacje o dokumencie.
- : Podaje tytuł dokumentu.
- : Opisuje wizualne elementy strony. To w sekcji treści strony blogerzy często wprowadzają poprawki HTML, gdy są potrzebne. Pozostałe wymienione znaczniki znajdują się w treści dokumentu.
-
:
Ten tag opisuje akapit.
Pamiętaj, że tekst strony jest zawarty w tagach początkowym i końcowym. Oto przykład:
To jest tekst akapitu.
Tagi nagłówka
Tagi nagłówka służą do wyświetlania hierarchii dokumentów. Prawdopodobnie już używasz nagłówków w formatowaniu bloga, ale różnica między nagłówkami 1-6 oznacza coś więcej niż tylko rozmiar tekstu i grubość czcionki. Przekazują także poczucie hierarchii przeglądarkom internetowym i botom wyszukiwarek.
Nagłówek 1 powinien być użyty jako główny nagłówek dokumentu, na przykład tytuł posta na blogu. Nagłówek 2 powinien zawierać dodatkowe informacje, takie jak podstawowe podtytuły. Użyj nagłówka 3 dla podtytułów i tak dalej, do nagłówka 6. Te tagi wyglądają następująco:
Oto przykład, jak to tłumaczy:
To jest pozycja 5
To jest pozycja 5
Wewnętrzne tagi tekstowe
Wewnętrzne tagi tekstowe to te, których będziesz używać do formatowania tekstu w tagach na poziomie bloku, takich jak
i
. Oto przykłady tego, czego zwykle będziesz używać.- : Definiuje podkreślony tekst, który większość przeglądarek kursywą.
- : Definiuje to mocno podkreślony tekst, który jest pogrubiony przez większość przeglądarek.
- : To formatuje cytat.
- : Pokazuje to usunięty tekst, który często tłumaczy się jako przekreślony, jak ten.
Tagi listy
Jak zauważyłeś, wykorzystałem kilka list wypunktowanych w tym poście na blogu. Ale jak to zrobiłem? Oto tagi, które musisz znać:
- :
Definiuje element listy.-
- :
-
- :
Oto przykład, jak wyglądałby kod HTML dla uporządkowanej listy:
- Element listy 1
- Element listy 2
- Element listy 3
Oto jak wyświetla się na stronie:
- Element listy 1
- Element listy 2
- Element listy 3
Tagi obrazów i linków
Zanim się rozstamy, rzućmy okiem na sposób wstawiania zdjęć i linków. Być może łatwiej jest po prostu wyświetlić kod, a następnie wypełnić informacje, gdy używasz tagów:
Połączyć
Nie usuwaj cudzysłowów wokół adresu URL. Wystarczy wstawić adres URL między znakami cudzysłowu. Twój tekst kotwicy to tekst, który pojawia się na stronie.
Spójrzmy na przykład. Gdybym chciał link do poprzedniego artykułu o Hosting Kingdom, kod wyglądałby następująco:
Jeśli zarejestrujesz domenę za pośrednictwem swojego hosta internetowego?
Link pojawi się na stronie w następujący sposób:
Jeśli zarejestrujesz domenę za pośrednictwem swojego hosta internetowego?
Wizerunek
Kod obrazu wygląda następująco:
Pamiętaj, że jest to tag inny niż kontener, więc nie ma tagu końcowego, ale potrzebujesz atrybutu src. Możesz dodać dodatki do tego znacznika, takie jak tekst alternatywny lub definicja rozmiaru. To by wyglądało tak:
Ponownie upewnij się, że nie usuwasz cudzysłowów.
Uwaga: Możesz zobaczyć różne kody, których można użyć do tego samego. Na przykład widziałem , , i tagi używane do pogrubienia tekstu, chociaż mogą się różnie wyświetlać w różnych przeglądarkach.
HTML nie musi być tak mylący, jak się wydaje. Aby ćwiczyć HTML i lepiej go zrozumieć, skorzystaj z interaktywnych witryn takich jak Code Academy, i daj nam znać, jak to wygląda w sekcji komentarzy.
