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 target="_blank" 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 target="_blank" 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:

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 target="_blank" 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:

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:
    1. Lucian Mustață joi, 27 februarie 2014, 11:55
    2. irina vineri, 28 februarie 2014, 10:21
      • Cristian Florea vineri, 28 februarie 2014, 10:52
    3. Vali Crintea vineri, 28 februarie 2014, 10:48
      • Cristian Florea vineri, 28 februarie 2014, 10:53
    4. ZDZero vineri, 28 februarie 2014, 11:39
    5. Alex Mihăileanu vineri, 28 februarie 2014, 12:17
    6. Tudor vineri, 28 februarie 2014, 18:53
    7. Costin marți, 11 martie 2014, 12:39
    8. Ionescu daniela miercuri, 28 ianuarie 2015, 6:07
      • Cristian Florea miercuri, 28 ianuarie 2015, 9:43
    9. Ionut miercuri, 11 februarie 2015, 14:59
      • Cristian Florea miercuri, 11 februarie 2015, 17:12
    10. Mihai miercuri, 18 februarie 2015, 19:57
      • Cristian Florea joi, 19 februarie 2015, 14:51
        • Mihai vineri, 20 februarie 2015, 1:07
    11. Catalin sâmbătă, 4 aprilie 2015, 0:38
    12. Flory miercuri, 2 decembrie 2015, 16:45
      • Cristian Florea miercuri, 2 decembrie 2015, 17:19

    Adaugă un comentariu