5 taguri HTML pe care ar trebui să le ştie orice blogger

Sunt întrebat destul de des cum se pune un banner pe blog sau cum se pune un link în sidebar. Ca să nu mai explic de fiecare dată, am hotărât să fac acest articol. Pe lângă indicaţiile despre cum se implementează cele mai sus menţionate, am hotărât să mai scriu câteva taguri HTML pe listă, că cine ştie când vor folosi? Fără alte introduceri, să trecem la treabă.

1. Cum scrii titluri de diferite mărimi

Există în limbajul HTML tagul „h”, care vine de la heading şi e folosit de obicei pentru scrierea titlurilor. Avem 6 taguri h, de la h1 (cel mai mare), la h6 (cel mai mic). Şi se folosesc astfel:

Dacă vrei un titlu scris cu h1, vei pune următorul cod HTML:
<h1> Acesta este un titlu scris cu H1</h1>

El va arăta aşa:

Acesta este un titlu scris cu H1

Încercăm şi cu h2?

<h2> Acesta este un titlu scris cu H2</h2>

Arată aşa:

Acesta este un titlu scris cu H2

Hai şi-un h6, că el e cel mai mic.

<h6> Acesta este un titlu scris cu H2</h6>

Arată aşa:

Acesta este un titlu scris cu H6

În blogging, când scrii un articol în modul vizual, ai cele şase heading-uri în partea stângă, la Paragraf. Vezi foto. Codurile acestea îţi sunt utile dacă, spre exemplu, vrei să scrii într-un Widget de tip text un lucru care să conţintă şi titlu.

2. Cum pui un link

Există un tag HTML care se numeşte „a href” şi care fix asta face: pune link-uri. S-ar putea să ţi se pară mai greu de reţinut, dar dacă te joci puţin cu el, o să te obişnuieşti. El se defineşte aşa:

<a href=”https://cristianflorea.ro”>Link spre blogul meu</a>

Acolo unde am scris https://cristianflorea.ro, se pune link-ul pe care vrei să ajungă cei care dau click, iar unde am scris „Link spre blogul meu”, este textul pe care dau ei click. Codul de mai sus va arăta aşa:

Link spre blogul meu

Dar hai să facem în aşa fel încât, atunci când cineva dă click pe link, să i se deschidă acea pagină într-un tab nou. Pentru asta, trebuie să modificăm puţin codul, adică aşa:

<a href=”https://cristianflorea.ro” target=”_blank”>Link spre blogul meu</a>

Observi acel „target=”_blank””, da? El face diferenţa între un link care se deschide în tabul curent şi unul care se deschide într-un tab nou. Bineînţeles, în WordPress, dacă scrii în modul vizual, ai deja un buton pentru asta, dar în widgeturile de tip text nu ai.

3. Cum pui o imagine

Tagul HTML pentru imagini este „img”. E foarte uşor de reţinut şi nici folosirea lui nu-i anevoioasă, pentru că se scrie aşa:

<img src=”https://cristianflorea.ro/wp-content/uploads/2013/11/konstruim300x250.png” />

Ai văzut că am scris mai sus „https://cristianflorea.ro/wp-content/uploads/2013/11/konstruim300x250.png”. Acela este link-ul spre imaginea pe care vreau s-o afişez. Tagul img aşa lucrează: îi zici unde-i imaginea, iar el ţi-o afişează. În exemplul de mai sus, aplicarea tagului arată aşa:

5 taguri HTML pe care ar trebui să le ştie orice blogger 1 | Cristian Florea

Totuşi, dacă ai o imagine în calculator, cum afli care-i link-ul? Tot ce trebuie să faci este să o urci undeva. Ori pe blog, ori pe vreun serviciu de free image sharing. Eu recomand să o urci pe blog, pentru că ştii că nu va fi ştersă fără să te aştepţi.

Ca să urci o imagine pe blog şi să-i afli link-ul, trebuie să te duci la Fişiere » Adăugare fişiere (dacă e în limba engleză, e Media » Add New Media), urci imaginea, apoi apeşi pe butonul Edit. După ce-l apeşi, o să vezi că undeva scrie „File URL”. Acela este link-ul spre imagine, pe care trebuie să-l pui în cadrul tagului „img”.

4. Cum scrii îngroşat, înclinat, subliniat

Aici sunt mai multe taguri pe care trebuie să le reţii, pentru că fiecare stil de scris în parte are tagul lui. Adică aşa:

<strong>Acesta este un text îngroşat</strong> – Acesta este un text îngroşat

<em>Acesta este un text înclinat</em> – Acesta este un text înclinat

<u>Acesta este un text subliniat</u> – Acesta este un text subliniat

5. Cum pui un banner

E tot un fel de nou tag HTML, chiar dacă e combinarea dintre două taguri pe care le-am explicat mai sus. Ce iese dacă aduni subpunctul 2 cu subpunctul 3? Codul următor:

<a href=”http://kooperativa.ro” target=”_blank”><img src=”https://cristianflorea.ro/wp-content/uploads/2013/11/konstruim300x250.png” /></a>

El va arăta aşa:

5 taguri HTML pe care ar trebui să le ştie orice blogger 1 | Cristian Florea

Poţi adăuga codul de mai sus la Aspect » Widgeturi » Text, dacă vrei să îţi pui în sidebar un banner.

Am încercat să fiu cât de scurt am putut, ca să nu îţi încarc mintea cu prea multe. Dacă am fost prea scurt şi ai nevoie de explicaţii în plus, să-mi zici. :D

Tags:

27 Comments

  1. Lucian Mustață 27 februarie 2014
    • Cristian Florea 27 februarie 2014
      • Lucian Mustață 27 februarie 2014
  2. irina 28 februarie 2014
    • Cristian Florea 28 februarie 2014
  3. Vali Crintea 28 februarie 2014
    • Cristian Florea 28 februarie 2014
  4. ZDZero 28 februarie 2014
  5. Alex Mihăileanu 28 februarie 2014
  6. Tudor 28 februarie 2014
  7. Costin 11 martie 2014
  8. Ionescu daniela 28 ianuarie 2015
    • Cristian Florea 28 ianuarie 2015
  9. Ionut 11 februarie 2015
    • Cristian Florea 11 februarie 2015
  10. Mihai 18 februarie 2015
    • Cristian Florea 19 februarie 2015
      • Mihai 20 februarie 2015
  11. Catalin 4 aprilie 2015
  12. Flory 2 decembrie 2015
    • Cristian Florea 2 decembrie 2015
  13. Ro 18 mai 2022
    • Cristian Florea 18 mai 2022

Leave a Reply