Interaktivna HTML e-pošta moćan je alat. Tvrtke ih mogu koristiti za promotivne ponude, slobodnjaci ih mogu koristiti za predstavljanje svojih usluga potencijalni klijenti, a unuci mogu izmamiti osmijeh na lice bakama i djedovima slatkim običajem oblikovati. Jedine dvije tehnologije koje će vam trebati za izradu prilagođene e-pošte od nule su HTML i inline CSS. Sve što trebate učiniti je imati na umu dizajn, analizirati ga u obliku redaka i stupaca tablice i možete početi graditi. U ovom ćete članku naučiti korak po korak metodu za izradu i slanje prilagođene HTML e-pošte.

Izgradite predložak e-pošte pomoću HTML-a

Predložak e-pošte oslanja se na tradicionalne HTML tehnike. Radit ćete s tablicama i slagati redove tablice i tabličnih podataka cijelo vrijeme. Osnovni HTML predložak e-pošte izgleda ovako:







MUO - Tehnologija, pojednostavljeno







...
...
...
...
...
...
...

...



Izlaz:

Bilo bi najbolje pripremiti dizajn kako biste mogli zacrtati gdje i kako ćete izrezati dizajn. Osim toga, bit ćete psihički spremni za izradu strukture tablice iz nje.

instagram viewer

Ovdje počinjete s DOCTYPE za dokument. Sljedeće, postavljate skup znakova, vrstu sadržaja, meta oznake i naslov unutar označiti. Bitni dio počinje s označi mjesto gdje stavljaš roditelja i dodajte više redaka tablice unutar. Nakon podjele sadržaja na odgovarajući broj redaka, vrijeme je za unos podataka tablice unutar njih.

Kao što je rečeno, morate raditi samo sa tablicama. Stoga, za unos različitih podataka unutar oznaku, morate slijediti definiranu rutu. Na primjer, napravimo predložak e-pošte s logotipom i datumom unutar a označiti.











Logo i datum unutar oznake











5. prosinca 2021





Sada znate kako postaviti HTML oznake i izgraditi dobru strukturu za svoj predložak e-pošte. Idemo naprijed kako bismo bolje razumjeli stil e-pošte.

Stilizirajte svoju HTML e-poštu

Stiliziranje HTML e-pošte je težak zadatak jer možete koristiti samo inline CSS. Također, morat ćete ponoviti stil za svaki element ako posjeduje sličan stil. Ako niste upoznati s kaskadnim stilskim listovima, istražite početak rada s CSS-om.

Pregled:



























5. prosinca 2021





















bok John Doe
Hvala vam što ste posjetili našu stranicu. Nadamo se da ste danas naučili nešto novo.

Vaše mišljenje nam je važno!

Ocijenite naše članke ovdje.

012345678910





Izlaz:

Ako želiš, možeš pristupite cijelom kodu na GitHubu i klonirajte spremište da ga koristite.

Slanje pošte

Sada kopirajte i zalijepite cijeli kod s GitHuba. Ako koristite VS Code, otvorite HTML datoteku pomoću proširenja poslužitelja uživo i kopirajte sadržaj klikom na Ctrl + A>Ctrl + C. Otvorite Gmail i sastavite novu e-poštu. Zalijepite sadržaj i unesite ID e-pošte primatelja. Pošaljite e-mail i dobit ćete rezultate kao što je prikazano u nastavku:

Testirajte kod na različitim uređajima da vidite kako izgleda i kako se ponaša. Prilagodite svoju HTML e-poštu i učinite je čistom, jednostavnom i prilagodljivom.

Izmijenite postojeće predloške e-pošte

Izrada HTML e-poruke od nule zahtijeva čvrsto držanje HTML-a i ugrađenog CSS-a. Također možete izmijeniti postojeći predložak e-pošte i prilagoditi ga svojim potrebama. Imajte na umu da je obično potrebno nekoliko sekundi da se učitaju HTML poruke e-pošte. Planirajte, dizajnirajte, kodirajte i provedite temeljito testiranje kako biste izbjegli nedosljednosti krajnjeg korisnika. Možete saznati više o semantičkom HTML-u i CSS-u za pisanje boljeg, pristupačnijeg koda.

Kako napraviti pristupačnu web stranicu pomoću semantičkog HTML-a i CSS-a

Napravite suptilna poboljšanja u HTML-u i CSS-u kako biste postigli web-dostupnost. Privucite posjetitelje na laku navigaciju i interakciju s vašom web-stranicom.

Pročitajte dalje

UdioCvrkutE-mail
Povezane teme
  • Programiranje
  • HTML
  • Programiranje
  • CSS
O autoru
Naincy Mourya (Objavljeno 17 članaka)

Naincy je specijalizirana za izgradnju web-mjesta s visokom brzinom odziva i učinkovite strategije sadržaja zajedno s web-kopijama. Ona je slobodna tehnička spisateljica koja pažljivo prati trendove tehnologije.

Više od Naincy Mourya

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu