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=”http://cristianflorea.ro”>Link spre blogul meu</a>

Acolo unde am scris http://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=”http://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=”http://cristianflorea.ro/wp-content/uploads/2013/11/konstruim300x250.png” />

Ai văzut că am scris mai sus „http://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=”http://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

Lasă un comentariu

26 comentarii

  • Lucian Mustață 27 Feb 2014, ora 11:55

    Pentru widgeturi, ca să scapi de corvoada cu editarea manuală a codului, poți instala Black Studio TinyMCE Widget care-ți permite să editezi widgetul în „visual mode”. E foarte util pentru cei care vor să scape de scris -uri și -uri.

  • irina 28 Feb 2014, ora 10:21

    De la – img – lipseste atributul – alt – e util, de obicei, pentru SEO. Se foloseste si pt text.
    De asemenea, eu vad util – br – si ca spatiu intre imagini; sau paragrafele – p – pentru texte. Tot pentru imagini – de exemplu ai un banner mai mic decat widget-ul – si vrei sa-l aliniezi stanga-dreapta-centru – eu folosesc – div align = ” ” – (totusi align nu merge in html 5); – div – e folosit pentru a grupa bucati de elemente din pagina.

    • Cristian Florea 28 Feb 2014, ora 10:52

      Mulţumesc pentru completări! Eu am vrut să fac un tutorial cât mai minimal, ca să nu le încarc oamenilor capul cu prea multe, dar dacă cineva doreste să aprofundeze, va citi comentariul tău şi va căuta pe Google cum se aplică. :D

  • Vali Crintea 28 Feb 2014, ora 10:48

    bun articol, eu am o problema cu alineatul in wordpress

    • Cristian Florea 28 Feb 2014, ora 10:53

      Eu nu folosesc alineate (şi pe internet, în general, nu se folosesc alineate), ci paragrafe. Adică laşi un rând liber în loc să începi cu alineat.

  • ZDZero 28 Feb 2014, ora 11:39

    Imi amintesc ce fericit am fost cand am aflat cum sa fac sa se deschida un link in tab nou :))

  • Alex Mihăileanu 28 Feb 2014, ora 12:17

    Mno, vezi c-ai rasolit-o la italice. Nu se mai foloseşte i, ci em.

  • Tudor 28 Feb 2014, ora 18:53

    Mie imi plac aliniatele :)

  • Costin 11 Mar 2014, ora 12:39

    Am pus pe blog unele poze cu picturile prietenului meu. A facut o licitatie caritabila si acum ca s-a terminat am sters pozele. Daca vreau sa distribui blogul pe Facebook imi arata imaginile astea.
    Cum pot scoate imaginile cand distribui blogul pe Facebook?
    Multumesc

  • Ionescu daniela 28 Ian 2015, ora 06:07

    Sunt incepatoare pe platforma wordpress si as dori sa imi explicati ca pentru incepatori cumpun un banner al carui cod l-am primit de la un advertiser ?

    • Cristian Florea 28 Ian 2015, ora 09:43

      Bună, Daniela,

      Dacă blogul tău este pe platforma WordPress, trebuie să mergi în Dashboard la Aspect » Widget-uri, iar de acolo să alegi un Widget Text şi în el să introduci codul primit. Uite şi un filmuleţ asemănător: https://www.youtube.com/watch?v=VzFS1lT8Mck S-a mai schimbat puţin aspectul Dashboardului de când a fost făcut clipul, dar principiul e cam acelaşi. :D

  • Ionut 11 Feb 2015, ora 14:59

    /u sau /em sau /strong cum le folosim mai exact?

    • Cristian Florea 11 Feb 2015, ora 17:12

      Spune-mi, te rog, ce nu este clar, ca să ştiu exact cum să explic. :D

      Mersi!

  • Mihai 18 Feb 2015, ora 19:57

    Salutare!
    Detin site pe wordpress 3.9.1 – http://www.easyevent.md
    La moment am publicat pe site citeva bannere publicitare (publicate prin cod generat de bannersnack.com, cu care am si creat bannerele si copiat in widget text pe http://www.easyevent.md)
    Exemplu:

    var bannersnack_embed = {„hash”:”bxj8rf3c4″,”width”:300,”height”:250,”t”:1421408164,”userId”:16401251,”bgcolor”:”#3D3D3D”,”wmode”:”opaque”};

    Asa cum sint in versiunea cu plata pe bannersnack.com am download-at bannerele in variante .jpeg sau/si flash.

    Acum: Ce cod folosesc (script) pentru a incarca bannerele
    (deja in varianta .jpg sau flash) pe site ?
    Am incercat sa fac asa:
    incarcat banner jpeg in biblioteca media a site-ului – copiat link (adresa imaginii)- si paste in widget text ca in exemplu
    dar problema e ca bannerul trece cu citiva pixeli peste linia cîmp. :(
    As vrea sa le pozitionez exact unde sunt acum.
    Astept o recomandare de la Dvs.
    Cu respect.

    • Cristian Florea 19 Feb 2015, ora 14:51

      Înseamnă că bannerul este mai lat decât spaţiul în care l-ai pus. În exemplul de mai sus am scris undeva „img src=”. Tu modifică în codul tău cu „img width=”90%” height=”90%” src=”. Să-mi spui dacă a mers. :D

      • Mihai 20 Feb 2015, ora 01:07

        Merci ptr raspuns.
        Bannerele sunt standarte 300×250, si marimea nue o problema aici deoarece le folosesc in aceleasi marimi acum, insa cu legatura de pe bannersnack. Daca aveti posibilitatea, da-ti un click pe http://www.easyevent.md si o sa le vedeti in coloana din dreapta.
        Deoarece bannerele fac permanent legatura cu bannersnack imi ia din videta de incarcarea site-ului meu. Acum, vreau sa le pun direct pe site inaginile culink in exteriorul/interiorul site-ului easyevent.md si nu le pot centrasa zicem ..sau cumva asa..se pun putin spre dreapta, trecind peste marinea site-ului.

  • Catalin 4 Apr 2015, ora 00:38

    Salut, am si eu o intrebare cu toate ca nu vad cum va fi posibil sa fac ceea ce vreau sa fac, dar totusi incerc.

    Pentru poza de mai sus(sunt mai multe poze mici – logo-uri combinate si rezulta o poza mare), poti deschide link-ul fara nici o teama, vreau ca pentru fiecare logo sa pun link. Daca spre exemplu dai click pe zona cu logo-ul „datpiff” sa se deschida datpiff.com, daca dai click pe logoul „MixTapeWire” sa se deschida pagina MixTapeWIRE.com si asa mai departe. Cum pot face asta?
    Exemplu (document PDF cu link-uri atasate): http://mp3takeout.com/download.php?file=58MixTapeSITES.jpg.pdf

    Multumesc anticipat!

  • Flory 2 Dec 2015, ora 16:45

    Buna, as vrea sa stiu dac pe blogul wordpress pot adauga o imagine live, un link live LA ANTET PE PRIMA PAGINA, ma poate ajuta cineva cu un raspuns??

    • Cristian Florea 2 Dec 2015, ora 17:19

      Salutare,

      Dacă e pe wordpress.com, e destul de limitat și cred că nu poți adăuga așa ceva.