Coduri HTML de bază pe care trebuie să le cunoască fiecare utilizator WordPress

Publicat: 2019-04-24

HTML este fundamentul a aproape totul de pe internet. Este piatra de temelie pe care este construit conținutul de internet și a fost de zeci de ani. Fără o înțelegere solidă a HTML-ului, tot ceea ce faceți cu WordPress sau orice alt design și dezvoltare web va fi scăzut. Din fericire pentru dvs., există o serie de coduri HTML de bază pe care fiecare utilizator WordPress de la începători la veterani le folosește aproape zilnic. Să le descompunem și să vă punem la curent.

Abonați-vă la canalul nostru Youtube

Ce este HTML?

Iată versiunea rapidă: HTML înseamnă limbaj de marcare hipertext , ceea ce înseamnă că nu este chiar un limbaj de programare. HTML nu comandă computerului dvs. să ruleze lucrurile prin script. Mai degrabă, ia textul pe care îl aveți pe pagina dvs. și îl marchează. Cursiv, bold, alinierea, dimensiunea și așa mai departe. HTML vă oferă, de asemenea, posibilitatea de a include imagini și linkuri, iar cu HTML5, cea mai nouă versiune le manipulează și textul în noi moduri interesante.

Codul HTML este conținut în steaguri și este destul de ușor de citit. O pagină HTML simplă ar putea arăta cam așa: 

<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>

Când este redat într-un browser, ar arăta astfel:

Coduri HTML de bază

După cum puteți vedea, HTML nu este atât de confuz. De fapt, chiar dacă nu ați văzut niciodată vreun cod HTML până acum, pun pariu că vă puteți da seama ce înseamnă fiecare dintre aceste etichete doar prin context. Cu asta în afara drumului, să ne uităm la cele mai comune coduri HTML de bază pe care le veți folosi de-a lungul carierei pe web.

Îndrăzneţ

Când vă înfășurați textul cu <strong> etichete, îi spuneți browserului să îngrășeze textul. De asemenea, puteți utiliza pur și simplu <b> , dar cu Google și alte motoare de căutare care preferă codarea semantică, sunteți mai sigur cu <strong>

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

Cursiv

<Em> înseamnă accent și este modul semantic de a utiliza cursivele în HTML. De asemenea, puteți utiliza <i> pentru a face acest lucru.

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

Subliniați

Același lucru este valabil și pentru <u> și subliniere. În general, acesta are o utilizare foarte mică, deoarece linkurile sunt subliniate și textul subliniat pe care nu puteți face clic dă o experiență de utilizator proastă.

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

Titluri

Probabil cel mai utilizat dintre toate codurile HTML de bază sunt diferitele titluri. Folosind <h1>, <h2>, <h3>, <h4>, <h5>, <h6> pentru a împărți conținutul în secțiuni.

Asigurați-vă că le folosiți în ordine ierarhică. Google dorește să faceți titluri cuiburi, deci asigurați-vă că utilizați <h2> numai sub <h1> , nu sub <h3> .

Deși majoritatea paginilor vor avea doar un singur <h1> , Google nu vă mai penalizează pentru că aveți mai multe. Rețineți că utilizarea unui <h1> vă resetează cuibărirea pentru pagină (sau cel puțin acea secțiune a paginii).

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

Toate anteturile pentru elementele HTML de pe această pagină sunt h2 .

Imagine

Inserarea imaginilor este unul dintre cele mai utile lucruri pe care le face HTML. A rupt internetul din stilurile sale brutale și a intrat pe drumul către locul în care se află astăzi. Tot ce trebuie să faceți este să aveți adresa URL a imaginii dorite și să puneți un singur <img src> (care reprezintă eticheta sursă a imaginii . Astfel:

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

Rețineți că nu este necesar să închideți eticheta de imagine, iar ghilimelele nu sunt necesare pentru ca imaginea să fie afișată. Mulți oameni le folosesc în continuare pentru a face codul mai lizibil.

Atributul <alt> este textul care apare în scopuri de accesibilitate și este, de asemenea, indexat de motoarele de căutare. Pentru persoanele cu cititoare de ecran și alte dispozitive, textul alternativ este absolut necesar pentru a utiliza internetul. Este întotdeauna o bună practică să aveți text alternativ pentru imaginile dvs.

Link-uri

Bine. Link-uri. Se întâmplă multe lucruri cu legăturile. Sau, mai degrabă, există multe lucruri pe care le puteți face cu linkurile. La cel mai simplu element, îl veți pune împreună cu o etichetă <a href> . <a> indică faptul că este un link, iar <href> este literalmente referința la hipertext (adresa URL) către locul în care faceți legătura.

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

Veți închide codul de legătură cu un simplu </a> și puteți utiliza orice text doriți între ele. Acesta va fi linkul în care se poate face clic și se numește text de ancorare .

Pe pagină apare astfel: Un link către pagina noastră Divi, iar acesta este textul de ancorare.

În plus, puteți adăuga și cod HTML. Puteți face clic pe o imagine inserând o etichetă <img src> între semnalizatoarele de legături.

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

Puteți vedea cum se redă o legătură cu imagine care poate fi făcută clic aici:

Coduri HTML de bază pentru conectarea rapidă a imaginilor

Mai multe atribute de link

Puteți include, de asemenea, destul de multe atribute diferite pentru linkuri, astfel încât acestea să se comporte în anumite moduri (cum ar fi ascunderea adresei URL de a fi un referent sau pentru a deschide linkul într-o fereastră nouă). Unele dintre cele mai utile pentru voi vor fi

  • rel indică un fel de relație pentru link și ținta acestuia. Cum ar fi noreferrer pentru a preveni urmărirea traficului de referință către dvs.
  • țintă îi spune browserului unde să deschidă linkul: _blank îl va deschide, de exemplu, într-o filă goală.
  • nofollow merge împreună cu rel și le spune motoarelor de căutare că nu doriți să transmiteți niciun suc de link către site-ul țintă. Acest lucru este bun atunci când vă conectați la conținut controversat și așa mai departe. De asemenea, îi împiedică pe oameni să trimită linkuri spam în comentariile dvs. și îl face astfel încât conținutul dvs. să poată fi văzut ca fiind imparțial, deoarece nu oferiți niciun bonus pentru a fi prezentat în afară de expunere și clicuri.

Sunt mai multe, dar acestea sunt cele pe care probabil le veți vedea cel mai des.

<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>

Text bătut

Dacă ești ca mine, uneori tu nevoie vrei să faci o glumă folosind cuvinte distruse. Sau poate că trebuie să marcați lucrurile dintr-o listă (sau să ștergeți, așa cum spune codul în sine). Sau orice altceva pentru care ar trebui să aveți o linie care trece prin text.

Atunci folosiți <del> în jurul textului pe care doriți să-l atingeți. Pentru unii oameni, acesta este un cod incredibil de comun, în timp ce alții nu îl pot folosi niciodată. Indiferent, este unul ușor de reținut.

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

Liste

Listele reprezintă o altă parte importantă a conținutului web în zilele noastre. Nu numai că îți oferă o mulțime de spațiu alb și distrug pereți de text, dar îți permit și să-ți organizezi gândurile în bucăți digerabile.

Există două tipuri de liste pe care le puteți face cu coduri HTML de bază. Listele ordonate care sunt numerotate 1, 2, 3 și așa mai departe. Listele neordonate folosesc gloanțe sau simboluri (în funcție de designul site-ului dvs.) în loc de numere.

Înfășurați fiecare listă fie cu <ul>, fie cu <ol> pentru liste neordonate sau respectiv ordonate. Și fiecare articol din listă ar trebui să fie înfășurat în <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>

Și acele coduri se redau astfel pentru a arăta diferența:

  • Aceasta face parte dintr-o listă neordonată.
  • La fel și asta.
  1. Și așa configurați o listă ordonată.
  2. Acesta este un link dintr-o listă.
  3. Și textul acestui link este îndrăzneț , dar această parte nu este.

De asemenea, puteți lista alte coduri în liste. Deci, puteți să folosiți text aldin, să inserați linkuri și așa mai departe.

Blocați cotațiile

Va trebui, la un moment dat în cariera dvs. WordPress, să citați site-ul altcuiva. Aici intervine <blockquote> . Înconjoară orice text pe care îl copiați / lipiți (și atribuiți) cu <blockquote> deschizând și închizând etichete și sunteți bine să mergeți.

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

Așa va arăta pe o pagină:

Acest text va apărea cu un stil special pentru a indica faptul că este un citat.

Paragrafele

Paragraful HTML este cam ciudat. În funcție de CMS și de constructorul pe care îl utilizați, acesta poate reda automat fiecare întrerupere de linie ca un paragraf separat. WordPress face acest lucru atunci când tastați HTML. Cu toate acestea, nu totul face asta. Deci, dacă trebuie să vă păstrați paragrafele separate și să nu aveți un perete de text, înfășurați-le pe fiecare în <p> . Browserul va ști apoi să afișeze fiecare bloc de text ca un paragraf separat în loc de un bloc continuu. În mod implicit, browserele ignoră întreruperile de linie, cu excepția cazului în care li se spune altfel.

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

Linii și pauze de linie

Poate doriți alte separări între paragrafe și secțiuni. Atunci puteți folosi etichetele <hr> și <br/> .

<hr> introduce o linie separatoare oriunde se află. Mulți oameni folosesc acest lucru pentru a separa widgeturile dintr-o bară laterală sau secțiunile majore ale unei pagini web.

Eticheta <br/> este o întrerupere de linie. Puteți utiliza <br/> în mijlocul unui <p> pentru a rupe o linie fără a intra într-un nou paragraf (pentru stilul blocurilor și de dragul organizării). <br/> este o etichetă cu închidere automată, ceea ce înseamnă că niciun conținut nu poate fi inclus în ea. Acest lucru este indicat de bară la sfârșitul codului.

Deși îl puteți folosi pentru a separa textul și paragrafele, inserându-le acolo unde doriți pauze, nu este o practică bună să intrați și, pe măsură ce avansați cu HTML și CSS și JavaScript, va trebui să vizați paragraful element pentru a face anumite lucruri. Puteți citi mai multe despre distincție aici.

Încheierea

HTML este absolut necesar pentru a interacționa cu internetul. Toată lumea le folosește în același mod, indiferent dacă începeți în dezvoltarea și proiectarea web sau un veteran din zilele anterioare JavaScript era un lucru. Încă folosim codurile HTML de bază pentru a rula bazele tuturor site-urilor noastre. Indiferent de cât de elegant este site-ul sau de cât de avansate sunt caracteristicile sale, atunci când un link se întrerupe sau lucrurile sunt îndrăznețe, ceea ce nu ar trebui să fie, veți continua să căutați pentru a vedea dacă <a href> sau <strong> etichetele sunt bine.

Care sunt cele mai utilizate coduri HTML de bază în zilele noastre?

Imagine prezentată de articol de către enterlinedesign / shutterstock.com