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:
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:
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:
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
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.
Bună completare. Mersi! :D
Să trăiești!
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.
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
bun articol, eu am o problema cu alineatul in wordpress
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.
Imi amintesc ce fericit am fost cand am aflat cum sa fac sa se deschida un link in tab nou :))
Pentru toţi a fost o realizare importantă. :)))
Mno, vezi c-ai rasolit-o la italice. Nu se mai foloseşte i, ci em.
Am corectat. Mersi! :D
Mie imi plac aliniatele :)
Da, depinde şi de preferinţe. :D
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
Încearcă asta: https://developers.facebook.com/tools/debug/
Cu acest tool, Facebook reciteşte codul sursă al site-ului tău şi dacă nu mai găseşte imaginile, nu le mai afişează.
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 ?
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
/u sau /em sau /strong cum le folosim mai exact?
Spune-mi, te rog, ce nu este clar, ca să ştiu exact cum să explic. :D
Mersi!
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.
Î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
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.
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!
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??
Salutare,
Dacă e pe wordpress.com, e destul de limitat și cred că nu poți adăuga așa ceva.
Interesant!! H2-ul, ca marime, vine dupa titlul articolului sau dupa un subtitlu din articol?
Titlul articolului ar trebui să fie H1, iar H2-ul se folosește în mod normal pentru subtitluri 😁