Podstawowe kody HTML, które każdy użytkownik WordPressa musi znać

Opublikowany: 2019-04-24

HTML jest podstawą prawie wszystkiego w Internecie. Od dziesięcioleci jest to kamień węgielny, na którym budowane są treści internetowe. Bez solidnego zrozumienia HTML wszystko, co robisz z WordPressem lub jakimkolwiek innym projektowaniem i programowaniem stron internetowych, będzie zahamowane. Na szczęście dla Ciebie istnieje mnóstwo podstawowych kodów HTML, z których każdy użytkownik WordPressa, od początkującego do weterana, używa niemal codziennie. Rozłóżmy je i przyśpieszmy.

Subskrybuj nasz kanał YouTube

Co to jest HTML?

Oto skrócona wersja: HTML oznacza hipertekstowy język znaczników , co oznacza, że ​​nie jest to całkiem język programowania. HTML nie nakazuje komputerowi uruchamiania rzeczy za pomocą skryptu. Raczej bierze tekst, który masz na swojej stronie, i oznacza go. Kursywa, pogrubienie, wyrównanie, rozmiar i tak dalej. HTML daje również możliwość dołączania obrazów i linków, a dzięki HTML5 najnowsza wersja manipuluje nimi i tekstem na nowe, ekscytujące sposoby.

Kod HTML jest zawarty w flagach i jest dość łatwy do odczytania. Prosta strona HTML może wyglądać mniej więcej tak: 

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

Po wyrenderowaniu w przeglądarce wyglądałoby to tak:

Podstawowe kody HTML

Jak widać, HTML nie jest tak mylący. W rzeczywistości, nawet jeśli nigdy wcześniej nie widziałeś żadnego kodu HTML, założę się, że możesz dowiedzieć się, co oznacza każdy z tych tagów, po prostu na podstawie kontekstu. Pomijając to, spójrzmy na najpopularniejsze, podstawowe kody HTML, których będziesz używać przez całą swoją karierę w sieci.

Pogrubiony

Zawijając tekst w tagi <strong> , każesz przeglądarce pogrubić tekst. Możesz także użyć po prostu <b> , ale ponieważ Google i inne wyszukiwarki preferują kodowanie semantyczne, jesteś bezpieczniejszy z <strong>

You can make <strong>text bold</strong> by using this tag.

Kursywa

<Em> oznacza nacisk , i jest to semantyczny sposób używania kursywy w HTML. W tym celu możesz również użyć <i> .

You can put <em>text in italics<em> by using this tag.

Podkreślać

To samo dotyczy <u> i podkreślania. Ogólnie rzecz biorąc, ten jest bardzo mało przydatny, ponieważ linki są podkreślone, a podkreślony tekst, którego nie można kliknąć, powoduje złe wrażenia użytkownika.

You can <u>underline</u> by using this tag.

Nagłówki

Prawdopodobnie najczęściej używanym ze wszystkich podstawowych kodów HTML są różne nagłówki. Użyj <h1>, <h2>, <h3>, <h4>, <h5>, <h6> do podzielenia treści na sekcje.

Pamiętaj, aby używać ich w kolejności hierarchicznej. Google chce, abyś zagnieżdżał nagłówki, więc używaj <h2> tylko poniżej <h1> , a nie poniżej <h3> .

Chociaż większość stron zawiera tylko jedną <h1> , Google nie karze już za posiadanie większej liczby. Pamiętaj tylko, że użycie <h1> resetuje zagnieżdżenie strony (lub przynajmniej tej sekcji strony).

<h2>H2 is the most commonly used header tag.</h2>

Wszystkie nagłówki elementów HTML na tej stronie to h2 .

Obraz

Wstawianie obrazów to jedna z najbardziej użytecznych rzeczy, które robi HTML. Wyrwał internet z brutalnych stylów i wkroczył na drogę do miejsca, w którym jest dzisiaj. Wszystko, co musisz zrobić, to mieć adres URL obrazu, który chcesz, i umieścić pojedynczy <img src> (oznaczający tag źródła obrazu . W ten sposób:

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

Pamiętaj, że nie musisz zamykać tagu obrazu, a cudzysłowy nie są wymagane do wyświetlenia obrazu. Wiele osób nadal ich używa, aby kod był bardziej czytelny.

Atrybut <alt> to tekst, który pojawia się w celu ułatwienia dostępu i jest również indeksowany przez wyszukiwarki. W przypadku osób z czytnikami ekranu i innymi urządzeniami tekst alternatywny jest absolutnie niezbędny do korzystania z Internetu. Zawsze najlepiej jest mieć tekst alternatywny dla obrazów.

Spinki do mankietów

W porządku. Spinki do mankietów. Dużo się dzieje z linkami. Lub raczej jest wiele rzeczy, które można zrobić z linkami. Najprościej połączysz je ze znacznikiem <a href> . <a> wskazuje, że jest to link, a <href> jest dosłownie odnośnikiem hipertekstowym (adresem URL) do miejsca, do którego prowadzisz link.

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

Kod linku zamkniesz za pomocą </a> , a pomiędzy nimi możesz umieścić dowolny tekst. Będzie to sam link, który można kliknąć i jest nazywany tekstem zakotwiczenia .

Wyświetla się na stronie w ten sposób: Link do naszej strony Divi, a to jest tekst kotwicy.

Dodatkowo możesz też zagnieździć kod HTML. Możesz sprawić, że obraz będzie klikalny, wstawiając tag <img src> między flagami linków.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

Tutaj możesz zobaczyć, jak renderuje się klikalny link do obrazu:

Podstawowe kody HTML do łączenia obrazów

Więcej atrybutów linków

Możesz także dołączyć kilka różnych atrybutów do linków, aby zachowywały się w określony sposób (na przykład ukrywanie adresu URL przed byciem odsyłającym lub otwieranie linku w nowym oknie). Niektóre z najbardziej przydatnych dla Ciebie będą

  • rel wskazuje na pewien rodzaj relacji między linkiem a jego celem. Takich jak noreferrer, aby zapobiec śledzeniu ruchu odsyłającego z powrotem do Ciebie.
  • cel mówi przeglądarce, gdzie otworzyć link: _blank otworzy go na przykład w pustej karcie.
  • nofollow idzie w parze z rel i mówi wyszukiwarkom, że nie chcesz przekazywać żadnego soku linków do docelowej witryny. Jest to dobre przy linkowaniu do kontrowersyjnych treści i tak dalej. Zapobiega to również spamowaniu linkami w Twoich komentarzach i sprawia, że ​​Twoje treści mogą być postrzegane jako bezstronne, ponieważ nie zapewniasz żadnej premii za wyróżnienie poza ekspozycją i kliknięciami.

Jest ich więcej, ale to te, które prawdopodobnie będziesz widywał najczęściej.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

Przekreślony tekst

Jeśli jesteś taki jak ja, czasami ty potrzebować chcesz żartować, używając przekreślonych słów. A może musisz oznaczyć rzeczy z listy (lub usunąć, jak mówi sam kod). Lub cokolwiek innego, do czego potrzebujesz linii biegnącej przez tekst.

Wtedy używasz <del> wokół tekstu, który chcesz przekreślić. Dla niektórych jest to niezwykle powszechny kod, podczas gdy inni mogą go nigdy nie używać. Niezależnie od tego łatwo ją zapamiętać.

You can use <del>this code</del> for strikethrough text in HTML.

Listy

Listy są obecnie kolejną ważną częścią treści internetowych. Nie tylko dają mnóstwo białej przestrzeni i rozbijają ściany tekstu, ale także pozwalają uporządkować myśli w łatwe do strawienia kawałki.

Istnieją dwa rodzaje list, które można tworzyć za pomocą podstawowych kodów HTML. Listy uporządkowane ponumerowane 1, 2, 3 i tak dalej. Listy nieuporządkowane wykorzystują punktory lub symbole (w zależności od projektu witryny) zamiast liczb.

Zawijasz każdą listę za pomocą <ul> lub <ol> odpowiednio dla list nieuporządkowanych lub uporządkowanych. Każda pozycja na liście powinna być opakowana w <li> .

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

A te kody renderują się tak, aby pokazać różnicę:

  • To jest część nieuporządkowanej listy.
  • Tak też jest.
  1. I tak tworzysz uporządkowaną listę.
  2. To jest link na liście.
  3. Tekst linku jest pogrubiony , ale ta część nie.

Możesz także zagnieżdżać inne kody na listach. Możesz więc pogrubić tekst, wstawić linki i tak dalej.

Cytaty blokowe

W pewnym momencie swojej kariery w WordPressie będziesz musiał zacytować czyjąś witrynę. W tym miejscu wkracza <blockquote> . Po prostu otocz tekst, który kopiujesz/wklejasz (i atrybut) znacznikami otwierającymi i zamykającymi <blockquote> i gotowe.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

Tak będzie wyglądać na stronie:

Ten tekst pojawi się ze specjalną stylizacją wskazującą, że jest to cytat.

Paragrafy

Akapit HTML jest trochę dziwny. W zależności od używanego systemu CMS i kreatora może on automatycznie renderować każdy podział wiersza jako osobny akapit. WordPress robi to, gdy wpisujesz HTML. Jednak nie wszystko to robi. Więc jeśli chcesz zachować oddzielne akapity i nie mieć ściany tekstu, zawiń każdy z nich w <p> . Przeglądarka będzie wtedy wiedziała, że ​​każdy blok tekstu ma wyświetlać jako osobny akapit zamiast jednego ciągłego bloku. Domyślnie przeglądarki ignorują łamanie wierszy, chyba że podano inaczej.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Linie i łamanie linii

Możesz potrzebować innych separacji między akapitami i sekcjami. Wtedy możesz użyć tagów <hr> i <br/> .

<hr> wstawia linię rozdzielającą w dowolnym miejscu. Wiele osób używa tego do oddzielania widżetów na pasku bocznym lub w głównych sekcjach strony internetowej.

Znacznik <br/> to podział wiersza. Możesz użyć <br/> w środku <p>, aby przełamać linię bez wchodzenia do nowego akapitu (ze względu na styl blokowy i porządek). <br/> to samozamykający się tag, co oznacza, że ​​nie może się w nim znajdować żadna treść. Wskazuje na to ukośnik na końcu kodu.

Chociaż możesz go użyć do dzielenia tekstu i akapitów, wstawiając je tam, gdzie chcesz, nie jest to dobra praktyka, a gdy będziesz bardziej zaawansowany w HTML, CSS i JavaScript, będziesz musiał kierować akapit element do robienia pewnych rzeczy. Więcej o wyróżnieniu przeczytasz tutaj.

Zawijanie

HTML jest absolutnie niezbędny do interakcji z Internetem. Wszyscy używają ich w ten sam sposób, niezależnie od tego, czy dopiero zaczynasz tworzenie i projektowanie stron internetowych, czy jesteś weteranem z czasów, zanim JavaScript był czymś. Nadal używamy podstawowych kodów HTML do uruchamiania podstaw wszystkich naszych witryn. Bez względu na to, jak ciekawa jest strona lub jak zaawansowane są jej funkcje, kiedy link się zrywa lub gdy coś jest pogrubione, a nie powinno być, nadal będziesz kopać, aby sprawdzić, czy tagi <a href> lub <strong> są robi dobrze.

Jakie są obecnie najczęściej używane podstawowe kody HTML?

Artykuł polecany przez enterlinedesign / shutterstock.com